/* styles.css */

div.basicstore .grid { display: grid; gap: 1rem; padding: 1rem; }
@media(min-width: 600px){
  div.basicstore .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
.card { border: 1px solid #ddd; padding: 1rem; text-align: center; display: flex; flex-direction: column; }
.card img { max-width: 100%; height: auto; margin: 0.5rem 0; }
.card .title { font-weight: bold; margin: 0.5rem 0; }
.card .description { flex-grow: 1; font-size: 0.9rem; color: #555; margin-bottom: 0.5rem; }
.card .price { font-size: 1.1rem; margin: 0.5rem 0; }
.card button { margin: 0.25rem; padding: 0.4rem 0.8rem; cursor: pointer; }

.productdetail .card {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

/* Product navigation styles */
.product-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.product-navigation h1 {
  margin: 0;
  flex: 1;
  text-align: center;
}

.nav-btn {
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #f8f9fa;
  color: #333;
  font-size: 1rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.nav-btn:hover {
  background-color: #e9ecef;
}

.nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f8f9fa;
}

.product-description {
  margin: 1rem;
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.basicstore {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.controls .left {
  display: flex;
  align-items: flex-start;
}

.controls .left button {
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #f8f9fa;
  color: #333;
  font-size: 1rem;
}

/* Hide browse button on index page */
body.index .controls .left button[id="browseBtn"] {
  display: none;
}

.controls .middle {
  text-align: center;
  font-weight: bold;
}

.controls .middle a {
  color: #007bff;
  text-decoration: none;
}

.controls .middle a:hover {
  text-decoration: underline;
}

.controls .right {
  display: flex;
  align-items: center;
  font-size: 2rem;
  cursor: pointer;
  position: relative;
}

.cart-count {
  position: absolute;
  top: -10px;
  right: -10px;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
  min-width: 18px;
  text-align: center;
}

.cart-count {
  position: absolute;
  top: -10px;
  right: -10px;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
  min-width: 18px;
  text-align: center;
}

.cart-item {
  border: 1px solid #ddd;
  padding: 1rem;
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cart-item img {
  max-width: 100px;
  height: auto;
}

.cart-item .description {
  font-size: 0.9rem;
  color: #555;
  margin: 0.5rem 0;
}

@media (max-width: 600px) {
  .cart-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

.cart-actions {
  margin-top: 2rem;
  display: flex;
  justify-content: flex-end;
}

.cart-actions button {
  padding: 0.5rem 1rem;
  cursor: pointer;
}

#productContainer button {
  padding: 0.5rem 1rem;
  cursor: pointer;
}

#userInfo button {
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  margin-left: 0.5rem;
}

.cart-item img {
  cursor: pointer;
}

#errorMsg {
  transition: opacity 1s;
}

#pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem;
}

#pagination button {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

#pagination .active {
  font-weight: bold;
  background-color: #ddd;
}

#pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem;
}

#pagination button {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

#pagination .active {
  font-weight: bold;
  background-color: #ddd;
}

.quantity-controls {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.quantity-controls button {
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.remove {
  margin-top: 1rem;
}

.item-total {
  font-weight: bold;
  margin-top: 0.5rem;
}

.cart-total {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 1rem 0;
  text-align: center;
}

#pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-dots {
  margin: 0 0.5rem;
}

.user-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 0 1rem;
  position: relative;
}

.user-content {
  background-color: #f5f5f5;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
}

.user-message {
  margin: 1rem 0;
}

.user-message p {
  margin: 0.5rem 0;
  font-size: 1.1rem;
}

.login-btn, .logout-btn {
  padding: 0.75rem 1.5rem;
  font-size: 1.1rem;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  margin: 0.5rem;
}

.login-btn {
  background-color: #007bff;
  color: white;
}

.login-btn:hover {
  background-color: #0056b3;
}

.logout-btn {
  background-color: #dc3545;
  color: white;
}

.logout-btn:hover {
  background-color: #c82333;
}

#userInfo {
  text-align: center;
  margin: 1rem 0;
  font-weight: bold;
}

#userInfo a {
  color: #007bff;
  text-decoration: none;
}

#userInfo a:hover {
  text-decoration: underline;
}

/* User orders styles */
.orders-container {
  margin-top: 2rem;
}

.order-card {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: white;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e9ecef;
}

.order-state {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: bold;
}

.order-state.open {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.order-state.accepted {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.order-state.rejected {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.delete-order-btn {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: bold;
  transition: background-color 0.2s;
}

.delete-order-btn:hover {
  background-color: #c82333;
}

.delete-order-btn:active {
  transform: translateY(1px);
}

.order-details {
  display: flex;
  gap: 2rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: #666;
}

.order-lines h3 {
  margin: 1rem 0 0.5rem 0;
  color: #333;
}

.order-line {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.9rem;
}

.order-line:last-child {
  border-bottom: none;
}

.no-orders {
  text-align: center;
  padding: 2rem;
  color: #666;
  font-style: italic;
}

.error-message {
  text-align: center;
  padding: 1rem;
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  margin-top: 1rem;
}

#loginForm input {
  width: 100%;
  padding: 0.5rem;
  margin: 0.5rem 0;
}

#loginForm button {
  padding: 0.5rem;
  cursor: pointer;
  min-width: 100px;
}

#errorMsg {
  transition: opacity 1s;
}