/*I used ChatGPT (a generative AI tool by OpenAI) to assist with CSS styling and layout design,
 mainly for learning unfamiliar CSS techniques and UI patterns. All generated code was reviewed, 
 modified, and tested by me to ensure correctness and compliance with the assignment requirements.*/
 
/* Reset & Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }

/*The basic style of the entire site*/
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5;
  color: #1f2937;
  background: #f6f7fb;
}

/*  Header & Nav  */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 16px;

  display: flex;
  align-items: center;
  gap: 16px;
}

.logo__link {
  font-weight: 800;
  text-decoration: none;
  color: #111827;
}


.site-nav { flex: 1; }
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.nav-link {
  text-decoration: none;
  color: #374151;
  padding: 6px 10px;
  border-radius: 10px;
}

.nav-link:hover {
  background: #f3f4f6;
}

/* shopping list button */
.cart-button {
  cursor: pointer;
  user-select: none;
  border: 1px solid #e5e7eb;
  padding: 8px 12px;
  border-radius: 12px;
  background: #ffffff;
}

/*  Layout  */
.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}

.intro {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px;
}

.intro__title { margin: 0 0 6px; font-size: 24px; }
.intro__text { margin: 0; color: #4b5563; }

.section-title { margin: 22px 0 10px; }

/*  Breadcrumb  */
.breadcrumb {
  margin: 8px 0 14px;
}

.breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #6b7280;
  font-size: 14px;
}

.breadcrumb__item a {
  color: #374151;
  text-decoration: none;
}

.breadcrumb__item a:hover {
  text-decoration: underline;
}

.breadcrumb__item:not(:last-child)::after {
  content: ">";
  margin-left: 6px;
  color: #9ca3af;
}

/*  product list（tableless）: Flexbox grid  */
.product-grid {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.product-card {
  width: min(320px, 100%);
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
}

.product-card__thumb img {
  height: 180px;
  width: 100%;
  object-fit: cover;
}

.product-card__body {
  padding: 12px;
  display: grid;
  gap: 8px;
}

.product-card__name {
  margin: 0;
  font-size: 16px;
}

.product-card__name a {
  color: #111827;
  text-decoration: none;
}

.product-card__name a:hover {
  text-decoration: underline;
}

.product-card__price {
  margin: 0;
  font-weight: 700;
}


/*  Product detail page  */
.product-detail {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;

  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px;
}

.product-detail__media {
  flex: 1 1 360px;
}

.product-detail__media img {
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  height: 320px;
  width: 100%;
  object-fit: cover;
}

.product-detail__info {
  flex: 1 1 320px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.product-detail__title { margin: 0; font-size: 28px; }
.product-detail__price { margin: 0; font-weight: 800; font-size: 18px; }
.product-detail__desc { margin: 0; color: #4b5563; }

.product-detail__bullets {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #374151;
}

/*  Buttons  */
.btn {
  cursor: pointer;
  border: 1px solid #e5e7eb;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  font-weight: 600;
}

.btn:hover { background: #f3f4f6; }

.btn_checkout {
  border-color: #111827;
  background: #111827;
  color: #ffffff;
}

.btn_checkout:hover {
  background: #0b1220;
}

/* Add to Cart button - stronger visual */
.btn.add-to-cart {
  background-color: #2563eb;   /* blue */
  color: white;
  border: none;
}

.btn.add-to-cart:hover {
  background-color: #1d4ed8;   /* darker blue */
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.btn.add-to-cart:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Shopping List Drawer  */
/* checkbox hidden */
.cart-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* The right postion */
.cart {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(360px, 92vw);
  background: #ffffff;
  border-left: 1px solid #e5e7eb;
  z-index: 50;

  transform: translateX(110%);  /*push out of the screen (hidden)*/
  transition: transform 0.25s ease;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* checkbox pull the drawer in when it is checked*/
.cart-toggle:checked ~ .cart {
  transform: translateX(0);
}



.cart__header {
  padding: 14px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cart__title { margin: 0; font-size: 18px; }

.cart__close {
  cursor: pointer;
  user-select: none;
  border: 1px solid #e5e7eb;
  padding: 6px 10px;
  border-radius: 10px;
}

.cart__content {
  padding: 14px;
  display: grid;
  gap: 12px;
  overflow: auto;
}

.cart-item {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cart-item__name { margin: 0; font-weight: 800; }
.cart-item__price { margin: 0; color: #6b7280; font-size: 14px; }

.cart-item__qty {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: #374151;
}

.cart-item__qty input {
  width: 80px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.cart__footer {
  padding: 14px;
  border-top: 1px solid #e5e7eb;
  display: grid;
  gap: 8px;
}

.cart__note {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}

/* ================= ADMIN PANEL ================= */

.admin-title {
  text-align: center;
  margin-bottom: 30px;
}

.admin-section {
  margin-bottom: 40px;
}

/* Card style container */
.admin-card {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Row layout */
.form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.form-row label {
  font-weight: 600;
  margin-bottom: 5px;
}

/* Selector row */
.selector-row {
  display: flex;
  gap: 30px;
  align-items: center;
}

/* Buttons */
.button-group {
  display: flex;
  gap: 10px;
}

button {
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background-color: #3498db;
  color: white;
  transition: 0.2s;
}

button:hover {
  opacity: 0.85;
}

/* Different button colors */
button.success {
  background-color: #27ae60;
}

button.danger {
  background-color: #e74c3c;
}

/* Message box */
#msg {
  margin-top: 20px;
  padding: 15px;
  background: #f6f6f6;
  border-radius: 6px;
  font-size: 14px;
}

.admin-button {
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 12px;
  background: #111827;
  color: white;
  font-weight: 600;
  margin-left: 8px;
}

.admin-button:hover {
  background: #1f2937;
}

.back-home {
  display: inline-block;
  margin-bottom: 20px;
  text-decoration: none;
  padding: 8px 14px;
  background: #111827;
  color: white;
  border-radius: 12px;
  font-weight: 600;
}

.back-home:hover {
  background: #1f2937;
}

.no-image {
  height: 320px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}