/* ----- Global ----- */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: Arial, sans-serif;
  color: black;
  background: linear-gradient(135deg, #E66C2C, #000000, white);
  background-repeat: no-repeat;
  background-attachment: fixed;
  text-align: center;
}

/* ----- Header ----- */
header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 20px;
  background: none;
  position: relative;
}

h1#website-name {
  color: black;
  font-size: 2em;
  margin: 0 auto;
}

#cart-btn {
  position: absolute;
  right: 20px;
  top: 15px;
  background: #E66C2C;
  color: black;
  border: none;
  padding: 8px 15px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s, color 0.2s;
}

#cart-btn:hover { background: #d45a1e; color: white; }

/* ----- Buttons ----- */
button,
#detail-action-btn,
#back-btn,
#back-to-shop,
#checkout-btn {
  background: #E66C2C;
  color: black;
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s, color 0.2s;
}

button:hover,
#detail-action-btn:hover,
#back-btn:hover,
#back-to-shop:hover,
#checkout-btn:hover { background: #d45a1e; color: white; }

/* ----- Search & Sort ----- */
#search-bar,
#sort-by {
  display: inline-block;
  margin: 10px 5px;
  padding: 10px;
  border-radius: 5px;
  border: none;
  font-size: 16px;
  text-align: center;
  color: #E66C2C;
  background-color: black;
  width: auto;
  min-width: 200px;
}

/* ----- Product Grid ----- */
#item-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  padding: 30px;
  justify-items: center;
}

.item-card {
  border-radius: 12px;
  overflow: hidden;
  background: black;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  width: 220px;
  text-align: center;
  color: #E66C2C;
  cursor: pointer;
}

.item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}

.item-img { width: 100%; height: 180px; display: flex; justify-content: center; align-items: center; background: black; }
.item-img img { max-width: 150px; max-height: 150px; object-fit: contain; border-radius: 10px; }

.item-info h2 { font-size: 1.1rem; margin-bottom: 5px; color: #E66C2C; }
.item-info p { margin: 2px 0; font-size: 0.9rem; }

/* ----- Load More Button ----- */
#load-more-btn { display: block; margin: 20px auto; padding: 10px 20px; font-size: 1rem; border-radius: 8px; cursor: pointer; }

/* ----- Product Detail Page ----- */
#product-detail { text-align: center; padding: 30px; color: white; }
#product-detail.hidden { display: none; }
#product-detail img { max-width: 300px; max-height: 300px; margin-bottom: 15px; border-radius: 10px; }
#product-detail select { margin: 10px 0; padding: 10px; border-radius: 8px; border: none; outline: none; font-size: 16px; }
#product-detail h3#totalPrice { margin-top: 10px; font-size: 1.2rem; color: #E66C2C; }
#detail-action-btn.waitlist { background: #e74c3c; }
#detail-action-btn.waitlist:hover { background: #c0392b; }

/* ----- Cart Page ----- */
#cart-page { text-align: center; padding: 20px; color: white; }
#cart-page.hidden { display: none; }
#cart-items { margin-top: 20px; }
.cart-item { display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.5); padding: 10px 15px; border-radius: 8px; margin-bottom: 10px; }
.cart-item button { background: #E66C2C; color: black; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.cart-item button:hover { background: #d45a1e; color: white; }
#cart-total { margin-top: 15px; font-weight: bold; font-size: 1.2rem; }

/* ----- Cart Alert ----- */
#cart-alert {
  position: fixed;
  top: 80px;
  right: 20px;
  background: #E66C2C;
  color: black;
  padding: 10px 15px;
  border-radius: 8px;
  display: none;
  z-index: 2000;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* ----- Footer ----- */
footer { margin-top: auto; padding: 20px; text-align: center; color: black; }