/* =========================
   Scoped to Product Form Page
   ========================= */
.product-form-page {
  max-width: 600px;  /* reduce width for better readability */
  margin: 0 auto;
  padding: 2rem 1rem;
  font-family: 'Poppins', sans-serif;
  color: #212529; /* default blackish text */
}

/* Form Title */
.product-form-page h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #0d6efd;
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}

/* Optional underline for title */
.product-form-page h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background-color: #0d6efd;
  margin: 8px auto 0;
  border-radius: 2px;
}

/* Form Card */
.product-form-page form {
  background-color: #ffffff;
  padding: 2rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Labels */
/* Ensure labels are left-aligned */
.product-form-page label.form-label {
  display: block;       /* block ensures it takes full width */
  text-align: left;     /* align text to left */
  font-weight: 600;     /* medium weight for modern look */
  color: black;       /* blue color for labels */
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
}

/* Inputs */
.product-form-page .form-control,
.product-form-page .form-select {
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
}


/* Inputs & Selects */
.product-form-page .form-control,
.product-form-page .form-select {
  border-radius: 8px;
  border: 1px solid #ced4da;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  width: 100%;
  transition: all 0.3s ease;
}

.product-form-page .form-control:focus,
.product-form-page .form-select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 8px rgba(13,110,253,0.2);
  outline: none;
}

/* File Input */
.product-form-page input[type="file"] {
  padding: 0.4rem;
  border-radius: 8px;
}

/* Image Preview */
/* Product image styling */
.product-form-page .img-thumbnail {
  border-radius: 8px;
  margin-top: 10px;
  max-width: 200px;       /* slightly larger */
  height: auto;           /* maintain aspect ratio */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  display: block;
  float: left;            /* align to left */
  margin-right: 15px;     /* spacing between image and form fields */
}


/* Buttons */
.product-form-page .btn-primary {
  align-self: flex-start;
  background-color: #0d6efd;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.product-form-page .btn-primary:hover {
  background-color: #0b5ed7;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13,110,253,0.3);
}

/* Validation Overrides */
.product-form-page .was-validated .form-control:invalid,
.product-form-page .was-validated .form-select:invalid {
  border-color: #dc3545;
  box-shadow: none;
}

.product-form-page .was-validated .form-control:valid,
.product-form-page .was-validated .form-select:valid {
  border-color: #198754;
  box-shadow: none;
}