/* ------------------------------
   Add New Product Form Styles
------------------------------- */
.add-product-page {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.add-product-page h2 {
  font: var(--main-heading);
  color: var(--color-text-dark);
  margin-bottom: 20px;
}

.add-product-page form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.add-product-page label {
  display: block;
  font: var(--body-small);
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text-dark);
}

.add-product-page input[type="text"],
.add-product-page input[type="number"],
.add-product-page input[type="file"],
.add-product-page select,
.add-product-page textarea {
  width: 100%;
  padding: 12px 14px;
  font: var(--body-regular);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-text-dark);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.add-product-page input:focus,
.add-product-page textarea:focus,
.add-product-page select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,150,136,0.15);
  outline: none;
}

.add-product-page textarea {
  min-height: 120px;
  resize: vertical;
}

/* Submit Button */
.add-product-page button[type="submit"] {
  background: var(--color-primary);
  color: var(--color-white);
  font: var(--body-regular);
  font-weight: 600;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
}

.add-product-page button[type="submit"]:hover {
  background: var(--color-primary-dark);
}

/* Success & Error Messages */
.add-product-page p[style*="color:green"] {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  padding: 12px 16px;
  border-radius: 6px;
  font: var(--body-small);
  margin-bottom: 15px;
}

.add-product-page ul[style*="color:red"] {
  background: #ffebee;
  border: 1px solid #ef9a9a;
  padding: 12px 16px;
  border-radius: 6px;
  font: var(--body-small);
  color: #d32f2f;
  list-style: disc;
  margin-left: 20px;
}

/* Responsive */
@media (max-width: 768px) {
  .add-product-page {
    padding: 20px;
  }
  .add-product-page h2 {
    font-size: 24px;
  }
}