/* Eturnal Rest -- sell.html only. Small layout helpers on top of base.css. */

/* ---- hero ---- */
.sell-hero {
  background:
    linear-gradient(180deg, rgba(247, 244, 238, 0) 0%, var(--cream) 100%),
    var(--cream);
}
.sell-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-7);
  align-items: center;
}
.sell-hero__note {
  margin-top: var(--space-4);
  font-size: 0.95rem;
}

/* reassurance card */
.sell-promise {
  background: var(--white);
}
.sell-promise__title {
  font-size: 1.4rem;
  margin-bottom: var(--space-4);
}
.sell-promise__list,
.sell-plan__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.sell-promise__list li,
.sell-plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink-2);
  line-height: 1.5;
}
.sell-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-800);
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 2px;
}

/* ---- section heads ---- */
.sell-section-head {
  max-width: 64ch;
  margin: 0 auto;
}

/* ---- why list (feature cards) ---- */
.sell-feat__icon {
  width: 68px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--green-100);
  color: var(--green-700);
  font-size: 2.1rem;
  margin-bottom: var(--space-3);
}

/* ---- steps ---- */
.sell-steps {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.sell-step {
  position: relative;
  padding-top: var(--space-2);
}
.sell-step__num {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--green-700);
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

/* ---- plan / price ---- */
.sell-plan {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: var(--space-7);
  align-items: center;
}
.sell-plan__card {
  background: var(--white);
}
.sell-plan__price {
  margin: var(--space-2) 0 var(--space-4);
  line-height: 1;
}
.sell-plan__price .serif {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  font-weight: 600;
  color: var(--green-800);
}
.sell-plan__per {
  display: block;
  margin-top: var(--space-2);
  color: var(--ink-3);
  font-size: 0.95rem;
}
.sell-plan__list {
  text-align: left;
  margin: var(--space-5) 0;
}

/* ---- what a listing needs ---- */
.sell-needs {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-7);
  align-items: center;
}
.sell-needs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.sell-needs__list .chip {
  font-size: 0.92rem;
}

/* ---- native form + checkout ---- */
.sell-form-wrap {
  max-width: 1080px;
  margin: 0 auto;
}
.sell-form {
  margin-top: var(--space-6);
}

/* ---- build layout: form + live preview side by side ---- */
/* The form column and the live preview sit in a two-column grid on desktop.
   The preview stacks above the form on narrower screens (see the responsive
   block below). The form column keeps its comfortable reading width. */
.sell-build {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
}
.sell-build__main {
  min-width: 0;
}
/* The form no longer needs its own top margin inside the build grid, since
   the grid supplies the gap and the section head sits above it. */
.sell-build__main .sell-form {
  margin-top: 0;
}

/* ---- live listing preview card ---- */
/* Mirrors the real .card.listing buyers see (buy page), so the seller watches
   their own listing take shape from their inputs (endowment / IKEA effect). */
.sell-preview {
  position: sticky;
  top: var(--space-6);
}
.sell-preview__lead {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--ink);
}
/* This card is a preview, not a link: no hover lift, so it reads as a calm
   echo of the seller's work rather than something to click. */
.sell-preview__card {
  height: auto;
}
.sell-preview__card:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}
/* Unfilled fields read in a soft, calm tone (never blank or broken). */
.sell-preview .is-empty {
  color: var(--ink-4);
  font-weight: 400;
  font-style: italic;
}
.sell-preview .listing__title.is-empty {
  font-style: italic;
  color: var(--ink-3);
}
/* Neutral photo placeholder before any photo is added. */
.sell-preview__photo-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: var(--space-4);
  background: var(--blue-50);
  color: var(--blue-700);
}
.sell-preview__photo-empty[hidden] {
  display: none;
}
.sell-preview__photo-empty span[aria-hidden] {
  font-size: 1.9rem;
  line-height: 1;
}
.sell-preview__photo-hint {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-3);
  max-width: 22ch;
}
.sell-preview__card .listing__photo img[hidden] {
  display: none;
}
/* Description echo: the seller's own note, clamped so a long note never
   stretches the card. */
.sell-preview__desc {
  margin: var(--space-2) 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sell-preview__desc[hidden] {
  display: none;
}
.sell-preview__note {
  margin: var(--space-3) 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-3);
}
/* required-field asterisk */
.sell-form .req {
  color: var(--accent-700);
  font-weight: 700;
}
/* honeypot: visually + acoustically hidden, still focusable to bots only */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* live price context near the submit button */
.sell-checkout-note {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: var(--space-5) 0 var(--space-4);
  padding: 14px 16px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.45;
}
.sell-checkout-note__price {
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--blue-700);
  font-size: 1.15rem;
}

/* ---- faq teaser ---- */
.sell-faq {
  background: var(--cream);
}

/* ---- cemetery name autocomplete (client review 2026-06-04) ---- */
.cem-typeahead {
  position: relative;
}
.cem-typeahead__hint {
  margin: 6px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
}
.cem-typeahead__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--line-cool, var(--line));
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg, var(--shadow));
  padding: 6px;
}
.cem-typeahead__list[hidden] {
  display: none;
}
.cem-typeahead__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  cursor: pointer;
  font-family: var(--font-sans);
  color: var(--ink);
  line-height: 1.3;
}
.cem-typeahead__item:hover,
.cem-typeahead__item:focus {
  background: var(--blue-50, var(--green-100));
  outline: none;
}
.cem-typeahead__item b {
  font-weight: 700;
  color: var(--blue-900, var(--green-900));
}
.cem-typeahead__item span {
  color: var(--ink-3);
}
.cem-typeahead__empty {
  padding: 12px;
  font-size: 0.86rem;
  color: var(--ink-3);
  text-align: center;
}

/* ---- savings note (Two months free) beside the plan price ---- */
.sell-plan__savings {
  margin: 0 0 var(--space-3);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--green-700);
  letter-spacing: 0.01em;
}

/* ---- multi-step form stepper ---- */

/* Progress header (hidden by default; JS removes aria-hidden and renders into it) */
.sell-stepper-head {
  margin-bottom: var(--space-5);
}
.sell-stepper-head[aria-hidden="true"] {
  display: none;
}

/* Screenreader-only status announcement */
.sell-stepper__status {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Visual progress track */
.sell-stepper__track {
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--space-3) 0 var(--space-2);
  border-bottom: 1px solid var(--line-cool);
  margin-bottom: var(--space-5);
}
.sell-stepper__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--ink-4);
  white-space: nowrap;
}
.sell-stepper__item.is-done {
  color: var(--ink-3);
}
.sell-stepper__item.is-current {
  color: var(--ink);
  font-weight: 600;
}
.sell-stepper__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-3);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-3);
  flex-shrink: 0;
  transition:
    background var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease);
}
.sell-stepper__item.is-done .sell-stepper__num {
  background: var(--green-100);
  color: var(--green-700);
}
.sell-stepper__item.is-current .sell-stepper__num {
  background: var(--blue-600);
  color: var(--white);
}
.sell-stepper__sep {
  flex: 1;
  height: 1px;
  background: var(--line-cool);
  margin: 0 var(--space-2);
  min-width: var(--space-4);
}

/* Progress fill bar above the track. The fill counts the step underway
   (step 1 of 3 = one third), so sellers always see forward motion and
   never an empty zero start (goal gradient, UX pass 2026-07-09). */
/* The bar: a slim, living aurora fill that drifts through calm teal, sea,
   green and soft gold as each field is filled. No number: the numbered
   track below carries orientation, matching how the best multi-step flows
   (Stripe, Vercel, Typeform) avoid a raw percentage. Gradient-flow +
   sheen adapted from open-source CSS patterns; all motion off under
   prefers-reduced-motion. */
.sell-stepper__bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
  margin-top: var(--space-2);
  box-shadow: inset 0 1px 2px rgba(29, 55, 68, 0.1);
}
.sell-stepper__bar-fill {
  position: relative;
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  overflow: hidden;
  background-image: linear-gradient(
    90deg,
    #1d3744 0%,
    #2f5d6e 22%,
    #3f8c7a 46%,
    #5aa17a 70%,
    #c9a86a 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  box-shadow: 0 0 8px 0 rgba(63, 140, 122, 0.35);
  animation: sell-progress-flow 7s ease-in-out infinite alternate;
  transition: width 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sell-stepper__bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transform: translateX(-100%);
  animation: sell-progress-sheen 4.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes sell-progress-flow {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}
@keyframes sell-progress-sheen {
  0% {
    transform: translateX(-100%);
  }
  60% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(200%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sell-stepper__bar-fill {
    animation: none;
    background-position: 40% 50%;
    transition: none;
  }
  .sell-stepper__bar-fill::after {
    animation: none;
    opacity: 0;
  }
}

/* Step section heading */
.sell-step-heading {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--space-5);
  outline: none; /* receives programmatic focus; no visible ring needed here */
}

/* Plot type checkbox group: one listing often covers several space types. */
.plot-types {
  border: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
}
.plot-types legend {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 2px;
  color: var(--ink-2);
  padding: 0;
}
.plot-types__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.plot-types__check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-cool, var(--line));
  border-radius: var(--radius-sm);
  background: var(--white, #fff);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink-2);
  transition:
    border-color var(--dur-2, 0.2s) var(--ease, ease),
    background var(--dur-2, 0.2s) var(--ease, ease);
}
.plot-types__check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--green-700);
  flex-shrink: 0;
}
.plot-types__check:hover {
  border-color: var(--green-700);
}
.plot-types__check:has(input:checked) {
  border-color: var(--green-700);
  background: var(--green-100);
  color: var(--green-900, var(--ink));
}

/* Representative-image opt-in: a calm, single-line choice framed as the
   seller's own preference (never a shortcoming). Mirrors the plot-type check
   look but sits full width with the text aligned to the top for the wrap. */
.rep-image__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-cool, var(--line));
  border-radius: var(--radius-sm);
  background: var(--white, #fff);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.4;
  transition:
    border-color var(--dur-2, 0.2s) var(--ease, ease),
    background var(--dur-2, 0.2s) var(--ease, ease);
}
.rep-image__check input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--green-700);
  flex-shrink: 0;
}
.rep-image__check:hover {
  border-color: var(--green-700);
}
.rep-image__check:has(input:checked) {
  border-color: var(--green-700);
  background: var(--green-100);
  color: var(--green-900, var(--ink));
}

/* Step navigation row */
.sell-step-nav {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  align-items: center;
}
.sell-step-nav--submit {
  flex-wrap: wrap;
}

/* No-JS: all steps show, no stepper header, no hidden sections */
/* JS-on (stepper mode): only the active step is shown */
.sell-form--stepper .sell-step-section[hidden] {
  display: none;
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .sell-hero__grid,
  .sell-plan,
  .sell-needs {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  /* Build layout collapses to one column. The preview moves above the form
     so the seller sees their listing take shape as they scroll into the
     steps, and it stops being sticky (no room to pin it on mobile). */
  .sell-build {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .sell-build__main {
    order: 2;
  }
  .sell-preview {
    order: 1;
    position: static;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }
  .sell-steps {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .sell-stepper__label {
    display: none; /* on small screens, show numbers only in the track */
  }
  .sell-stepper__item.is-current .sell-stepper__label {
    display: inline; /* always show the current step label */
  }
  .sell-step-nav--submit .btn--primary {
    width: 100%;
    justify-content: center;
  }
}

/* ===================== Per-plot sections (step 2) ===================== */
/* One price / notes / photos group per advertised plot, so every photo and
   price maps to a specific plot. Rendered by sell.js from the step-1 count. */
#per-plot-wrap {
  display: grid;
  gap: var(--space-4);
}
.pp-section {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-3) var(--space-4);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius);
  background: var(--blue-25);
}
.pp-section .field {
  margin: 0;
}
/* price + notes share a row; the photo picker gets the full width */
.pp-section .field:has(.pp-photos) {
  grid-column: 1 / -1;
}
.pp-section__title {
  grid-column: 1 / -1;
  padding: 0 6px;
  margin-left: -6px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--blue-700);
}
@media (max-width: 640px) {
  .pp-section {
    grid-template-columns: 1fr;
  }
}

/* per-plot type radios: the four type options inside each plot section */
.pp-type-field {
  grid-column: 1 / -1;
}
.pp-type-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
  font-family: var(--font-sans);
}
.plot-types__grid--pp {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-2);
  margin-top: 0;
}

/* spaces slider: drag for the common range, type for the exact count */
.plots-slider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.plots-slider__range {
  flex: 1;
  height: 6px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--blue-100);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.plots-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(29, 55, 68, 0.35);
}
.plots-slider__range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(29, 55, 68, 0.35);
}
.plots-slider__num {
  width: 110px;
  flex: none;
  text-align: center;
}

/* Listing-card layout for the live preview. These structural rules live in
   buy.css, which /sell does not load, so the preview needs them scoped here
   or the photo box collapses and the card renders broken. */
.sell-preview .listing {
  display: flex;
  flex-direction: column;
}
.sell-preview .listing__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--blue-50);
  overflow: hidden;
}
.sell-preview .listing__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sell-preview .listing__photo-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(29, 55, 68, 0.62);
  backdrop-filter: blur(2px);
  padding: 3px 9px;
  border-radius: 999px;
}
.sell-preview .listing .card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sell-preview .listing__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.sell-preview .listing__type {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-700);
}
.sell-preview .listing__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.28;
  color: var(--blue-900);
  margin: 2px 0 0;
}
.sell-preview .listing__cem {
  font-size: 0.92rem;
  color: var(--ink-2);
}
.sell-preview .listing__price {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--blue-700);
  line-height: 1;
  margin-top: 2px;
}
.sell-preview .listing__price--ask {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-2);
}