/* Scope to the section */

.marketplace-form {
  --brand-green: #779349;
  --brand-green-600: #67823f;
  --chip-border: #e5e7eb;
  --chip-text: #374151;
}

/* Heading (assumes Playfair Display is loaded globally if you want it) */

.marketplace-form h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

/* Make primary buttons green inside this form only */

#marketplace-application-form .btn.btn-primary {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
}

#marketplace-application-form .btn.btn-primary:hover, #marketplace-application-form .btn.btn-primary:focus {
  background-color: var(--brand-green-600);
  border-color: var(--brand-green-600);
}

/* Green focus ring for standard controls */

#marketplace-application-form .form-control:focus, #marketplace-application-form .form-select:focus {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 .2rem rgba(119,147,73,.25);
}

/* Chip-style checkboxes (product categories) */

#marketplace-application-form .form-check {
  display: inline-block;
  margin-right: .5rem;
  margin-bottom: .5rem;
}

/* Hide default box for chip group but keep it accessible */

#marketplace-application-form .form-check-input.product-cat {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Label styled as a chip */

#marketplace-application-form .form-check-label {
  display: block;
  padding: .45rem .75rem;
  border: 1.5px solid var(--chip-border);
  border-radius: 999px;
  color: var(--chip-text);
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: all .18s ease;
  user-select: none;
  background-color: #fff;
}

#marketplace-application-form .form-check:hover .form-check-label {
  border-color: #cfd6dd;
}

#marketplace-application-form .form-check-input.product-cat:checked + .form-check-label {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

#marketplace-application-form .form-check-input.product-cat:focus + .form-check-label {
  box-shadow: 0 0 0 .2rem rgba(119,147,73,.35);
  border-color: var(--brand-green);
}

/* Agree checkbox: smaller + green */

#marketplace-application-form .form-check-agree .form-check-input {
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--brand-green);
  margin-top: .2em;
}

#marketplace-application-form .form-check-agree .form-check-label {
  margin-left: 50px;
}

/* Helper text turns red when invalid (toggled in JS) */

#marketplace-application-form #product-cat-help.text-danger {
  font-weight: 600;
}

/* If "Nice Select" is used site-wide, avoid double carets on Bootstrap selects */

.marketplace-form .nice-select.form-select {
  background-image: none !important;
}

/* 1) Never allow horizontal scroll inside scrollable modal bodies */

.modal-dialog-scrollable .modal-body {
  overflow-x: hidden;
}

/* 2) If you keep .container inside a modal, neutralize any tiny overflow from row gutters */

.modal .container {
  max-width: 100%;
}

.modal .container > .row {
  margin-left: 0;
  margin-right: 0;
  /*optional: reduce gutter to be extra safe;*/
  --bs-gutter-x: 1rem;
}

/* 3) Constrain any custom selects (Nice Select, etc.) */

.modal .nice-select, .modal .nice-select.form-select {
  max-width: 100%;
}

/* 4) Let long strings wrap (URLs, code samples) */

.modal .form-text, .modal code, .modal label {
  overflow-wrap: anywhere;
  word-break: break-word;
}