/* GhanaRoll Listing Form Styles */
:root {
  --ghana-red: #EF3340;
  --ghana-yellow: #FFD100;
  --ghana-green: #009739;
  --black: #000000;
  --white: #FFFFFF;
}

.ghanaroll-listing-form {
  max-width: 600px;
  margin: 2rem auto;
  padding: 1.5rem;
  background-color: var(--white);
  border: 2px solid var(--ghana-green);
  border-radius: 5px;
}

input#listing_price,
input[name="listing_price"],
input[type="number"] {
    padding-left: 47px !important;
}

.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-weight: bold;
  color: var(--ghana-red);
  margin-bottom: 0.5rem;
}

.form-group select,
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--ghana-green);
  border-radius: 5px;
  background-color: var(--white);
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--ghana-yellow);
}

.ghanaroll-listing-form .button {
  background-color: var(--ghana-red);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.ghanaroll-listing-form .button:hover {
  background-color: var(--ghana-yellow);
  color: var(--black);
}

.form-message {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 5px;
  background-color: var(--white);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .ghanaroll-listing-form {
    padding: 1rem;
  }
}

.form-message { padding: 10px; margin: 10px 0; border-radius: 4px; }
.form-message.success { background: var(--ghana-green); color: white; }
.form-message.error { background: var(--ghana-red); color: white; }
.form-step { display: none; }
.form-step.active { display: block; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-weight: bold; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px; border-radius: 4px; }
.form-group input.error, .form-group select.error, .form-group textarea.error { border: 1px solid var(--ghana-red); }
.button { padding: 10px 20px; margin: 5px; background: var(--ghana-green); color: white; border: none; cursor: pointer; }
.button:disabled { background: #ccc; cursor: not-allowed; }
.photo-upload { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-item { position: relative; display: inline-block; }
.photo-item img { max-width: 100px; max-height: 100px; border-radius: 4px; }
.add-photo-btn { font-size: 2em; background: #ddd; border: none; cursor: pointer; width: 100px; height: 100px; border-radius: 4px; }
.required { color: var(--ghana-red); }