/* =========================================================================
   Edit request page (design system §24 FormField, §25 FormSection, §26 ChangeField, §27 LogoUploader, §41)
   Same vocabulary as the Item page: page background, compact context header, one bordered sheet whose
   sections are separated by dividers, a 380px supporting column on desktop.
   Scoped under .ds-edit because the page "styles" section loads before the ds component CSS.
   ========================================================================= */

.ds-edit {
  padding-block-end: var(--space-48);
  background-color: var(--color-background);
  text-align: start; /* the legacy site CSS sets body text-align:left */
}

/* ===================== Context header ===================== */

.ds-edit .ds-edit__head {
  padding-block: var(--space-20) var(--space-24);
}

.ds-edit .ds-edit__head .ds-breadcrumbs {
  margin: 0 0 var(--space-16);
}

.ds-edit .ds-edit__title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--item-header-title-font-size);
  font-weight: var(--item-header-title-font-weight);
  line-height: var(--line-height-h1);
}

.ds-edit .ds-edit__subject {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: var(--space-4) 0 0;
  color: var(--item-header-meta-color);
  font-size: var(--item-header-meta-font-size);
}

.ds-edit .ds-edit__subject > * + *::before {
  content: "·";
  margin-inline: var(--space-8);
  color: var(--color-placeholder);
}

.ds-edit .ds-edit__subject-name {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.ds-edit .ds-edit__subject .fa-location-dot {
  margin-inline-end: var(--space-4);
  color: var(--color-placeholder);
  font-size: var(--font-size-caption);
}

.ds-edit .ds-edit__intro {
  max-width: 60ch;
  margin: var(--space-12) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

@media (min-width: 1024px) {
  .ds-edit .ds-edit__head {
    padding-block: var(--space-24) var(--space-32);
  }
}

/* ===================== Layout: form sheet + supporting column ===================== */

.ds-edit .ds-edit__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-24);
}

@media (min-width: 1024px) {
  .ds-edit .ds-edit__layout {
    grid-template-columns: minmax(0, 1fr) var(--results-panel-width);
  }
}

.ds-edit .ds-edit__form {
  min-width: 0;
  margin: 0;
}

.ds-edit .ds-edit__sheet {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
}

@media (max-width: 639.98px) {
  .ds-edit .ds-edit__sheet {
    margin-inline: calc(var(--container-padding-mobile) * -1);
    border-inline: 0;
    border-radius: 0;
  }
}

/* Model-level messages (e.g. reCAPTCHA failure) appear above the first section, in the error Alert style */
.ds-edit .ds-edit__summary {
  padding: var(--space-20) var(--space-16) 0;
}

.ds-edit .ds-edit__summary:has(.validation-summary-valid),
.ds-edit .ds-edit__summary:empty {
  display: none;
}

.ds-edit .ds-edit__summary .validation-summary-errors {
  margin: 0;
}

.ds-edit .ds-edit__summary .validation-summary-errors.text-danger {
  color: var(--color-danger-text) !important; /* Bootstrap .text-danger uses !important */
}

/* ===================== Sections ===================== */

.ds-edit .ds-edit__section {
  padding: var(--space-20) var(--space-16) var(--space-24);
}

.ds-edit .ds-edit__section + .ds-edit__section {
  border-block-start: var(--border-width) solid var(--color-border);
}

.ds-edit .ds-edit__section-title {
  margin: 0 0 var(--space-16);
  color: var(--color-text);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--line-height-h3);
}

@media (min-width: 1024px) {
  .ds-edit .ds-edit__summary {
    padding: var(--space-24) var(--space-24) 0;
  }

  .ds-edit .ds-edit__section {
    padding: var(--space-24);
  }
}

/* Field grid: one column on phones; pairs of related short fields from 640px */
.ds-edit .ds-edit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--form-field-gap);
}

@media (min-width: 640px) {
  .ds-edit .ds-edit__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--form-section-column-gap);
  }

  .ds-edit .ds-edit__full {
    grid-column: 1 / -1;
  }
}

/* LTR values (numbers, e-mail, links, English text) read left-to-right but stay aligned under their RTL label */
.ds-edit .ds-input[dir="ltr"] {
  text-align: end;
}

[dir="ltr"] .ds-edit .ds-input[dir="ltr"] {
  text-align: start;
}

.ds-edit .ds-textarea {
  min-height: var(--textarea-min-height);
}

/* Validation messages: design-system error colour (Bootstrap .text-danger is !important) */
.ds-edit .ds-form-field .field-validation-error.text-danger {
  color: var(--input-error-text) !important;
}

/* Server messages may be English: let each message pick its own direction (no stray leading full stop) */
.ds-edit .field-validation-error,
.ds-edit .validation-summary-errors li {
  unicode-bidi: plaintext;
  text-align: start;
}

/* Bootstrap gives every <p> a 1rem bottom margin; helper text sits tight under its input */
.ds-edit .ds-form-field__helper {
  margin-block-end: 0;
}

/* ===================== ChangeField (§26): changed state + current value ===================== */

.ds-edit .ds-edit__changed-badge {
  display: none;
  margin-inline-start: var(--space-8);
  color: var(--color-primary-hover);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.ds-edit .ds-form-field.is-changed .ds-edit__changed-badge {
  display: inline;
}

.ds-edit .ds-form-field.is-changed .ds-input,
.ds-edit .ds-form-field.is-changed .ds-textarea {
  border-color: var(--color-primary-border);
  background-color: var(--color-primary-soft);
}

.ds-edit .ds-form-field.is-changed .ds-input:focus,
.ds-edit .ds-form-field.is-changed .ds-textarea:focus {
  border-color: var(--focus-border-color);
  background-color: var(--input-bg);
}

.ds-edit .ds-edit__current {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-4);
  margin: var(--helper-margin-top) 0 0;
  color: var(--helper-color);
  font-size: var(--helper-font-size);
  line-height: var(--line-height-body);
}

.ds-edit .ds-edit__current[hidden] {
  display: none;
}

.ds-edit .ds-edit__current-value {
  min-width: 0;
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

.ds-edit .ds-edit__undo {
  margin-inline-start: var(--space-8);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  cursor: pointer;
}

.ds-edit .ds-edit__undo:hover {
  color: var(--color-primary-hover);
}

.ds-edit .ds-edit__undo:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--space-4);
  border-radius: var(--radius-button);
}

/* ===================== LogoUploader (§27) ===================== */

.ds-edit .ds-edit__logo {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.ds-edit .ds-edit__logo-preview {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: calc(var(--space-64) + var(--space-8)); /* 72px (§28 logo size) */
  height: calc(var(--space-64) + var(--space-8));
  object-fit: contain;
  border: var(--border-width) solid var(--item-header-logo-border-color);
  border-radius: var(--item-header-logo-radius);
  background-color: var(--color-surface);
}

.ds-edit .ds-edit__logo-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  min-width: 0;
}

/* The native file input stays in the tab order (visually hidden); its label is the visible button */
.ds-edit .ds-edit__file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ds-edit .ds-edit__file + .ds-button {
  gap: var(--space-8);
  margin: 0;
  cursor: pointer;
}

.ds-edit .ds-edit__file + .ds-button .fa-upload {
  color: var(--color-primary);
}

.ds-edit .ds-edit__file:focus-visible + .ds-button {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

.ds-edit .ds-edit__file-name {
  min-width: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  overflow-wrap: anywhere;
}

.ds-edit .ds-form-field.is-changed .ds-edit__file-name {
  color: var(--color-primary-hover);
  font-weight: var(--font-weight-semibold);
}

/* ===================== Actions: sticky at the bottom while the form scrolls ===================== */

.ds-edit .ds-edit__actions {
  position: sticky;
  inset-block-end: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  padding: var(--space-12) var(--space-16) calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
  border-block-start: var(--border-width) solid var(--color-border);
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
  background-color: var(--color-surface);
}

.ds-edit .ds-edit__changes {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.ds-edit .ds-edit__changes.is-active {
  color: var(--color-primary-hover);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 639.98px) {
  /* Phone: count on its own line above two thumb-sized buttons */
  .ds-edit .ds-edit__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ds-edit .ds-edit__changes {
    grid-row: 1;
    grid-column: 1 / -1;
    font-size: var(--font-size-caption);
  }
}

@media (min-width: 640px) {
  .ds-edit .ds-edit__changes {
    margin-inline-start: auto;
  }
}

@media (min-width: 1024px) {
  .ds-edit .ds-edit__actions {
    padding-inline: var(--space-24);
  }
}

/* ===================== Supporting column ===================== */

.ds-edit .ds-edit__aside {
  display: none;
}

@media (min-width: 1024px) {
  .ds-edit .ds-edit__aside {
    position: sticky;
    inset-block-start: calc(var(--header-height-desktop) + var(--space-16));
    display: grid;
    gap: var(--space-16);
    padding: var(--space-24) var(--space-20);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
  }
}

.ds-edit .ds-edit__aside-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--line-height-h3);
}

.ds-edit .ds-edit__steps {
  display: grid;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: edit-step;
}

.ds-edit .ds-edit__steps li {
  display: grid;
  grid-template-columns: var(--space-24) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  counter-increment: edit-step;
}

.ds-edit .ds-edit__steps li::before {
  content: counter(edit-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-24);
  height: var(--space-24);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-hover);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.ds-edit .ds-edit__aside .ds-link-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  justify-self: start;
}

[dir="ltr"] .ds-edit .ds-edit__aside .fa-arrow-right {
  transform: scaleX(-1);
}

/* ===================== Success state (EditYourItemDone) ===================== */

.ds-edit--done {
  padding-block: var(--space-32) var(--space-64);
}

.ds-edit .ds-edit__done {
  max-width: var(--modal-width-md);
  margin-inline: auto;
  background-color: var(--color-surface);
  text-align: center;
}

.ds-edit .ds-edit__done-icon {
  color: var(--color-success);
  font-size: var(--icon-size-lg);
}