/* ============================================================
   tuzama — Post / edit a listing
   Loaded by pages/post-listing.html after its inline <style>.
   Form on the left, a live preview of the listing card on the
   right (desktop), and a sticky Back / Next bar.
   ============================================================ */

.listing-form-page {
  --pl-line: rgb(43 43 43 / 0.14);
}
.listing-form-page .site-header { background-color: var(--color-background); }


/* ─────────────────────────────────────────────────────────────
   Layout
   ─────────────────────────────────────────────────────────────*/
.pl-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}
.pl-layout.is-single { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
.pl-form { min-width: 0; }

.listing-form-page .wizard-container {
  max-width: none;
  margin: 0;
  padding: clamp(2rem, 4.5vw, 3.5rem) 0 0;
}
.listing-form-page .pl-form > div[style*="max-width"] { max-width: none !important; padding: 0 !important; }

.listing-form-page .wizard-page-title {
  margin-bottom: var(--space-6);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.listing-form-page .draft-banner {
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-subtle);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-medium);
}
.listing-form-page .draft-discard-btn { color: var(--color-primary-dark); }


/* ─────────────────────────────────────────────────────────────
   Progress
   ─────────────────────────────────────────────────────────────*/
.listing-form-page .wizard-progress {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.listing-form-page .wp-track { height: 6px; background-color: var(--color-border); }
.listing-form-page .wp-label { font-weight: var(--font-weight-semibold); color: var(--color-text); }
@media (min-width: 560px) {
  .listing-form-page .wp-circle {
    width: 28px;
    height: 28px;
    border-width: 1.5px;
    font-size: 12px;
  }
  .listing-form-page .wp-step:not(:first-child)::before { top: 13px; right: calc(50% + 15px); left: calc(-50% + 15px); height: 1.5px; }
  .listing-form-page .wp-step-label { font-size: 12px; color: var(--color-text-muted); }
  .listing-form-page .wp-step.is-active .wp-step-label { color: var(--color-text); font-weight: var(--font-weight-semibold); }
  .listing-form-page .wp-step.is-done .wp-step-label { color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
  .listing-form-page .wp-step.is-done .wp-circle { background-color: var(--color-surface); }
}


/* ─────────────────────────────────────────────────────────────
   Step headings + fields
   ─────────────────────────────────────────────────────────────*/
.listing-form-page .step-title {
  margin-bottom: var(--space-2);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}
.listing-form-page .step-subtitle {
  max-width: 56ch;
  margin-bottom: var(--space-8);
  font-size: 15.5px;
  line-height: 1.55;
}

.listing-form-page .form-label { font-size: 14.5px; font-weight: var(--font-weight-semibold); color: var(--color-text); }
.listing-form-page .form-hint { font-size: 13px; color: var(--color-text-muted); }

.listing-form-page .form-input,
.listing-form-page .form-select,
.listing-form-page .form-textarea,
.listing-form-page .cselect-trigger {
  border: 1px solid var(--pl-line);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-size: 15.5px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.listing-form-page .form-input,
.listing-form-page .form-select,
.listing-form-page .cselect-trigger { min-height: 50px; }
.listing-form-page .form-input:hover,
.listing-form-page .form-select:hover,
.listing-form-page .form-textarea:hover { border-color: rgb(43 43 43 / 0.32); }
.listing-form-page .form-input:focus,
.listing-form-page .form-select:focus,
.listing-form-page .form-textarea:focus,
.listing-form-page .cselect.is-open .cselect-trigger,
.listing-form-page .cselect-trigger:focus-visible {
  border-color: var(--color-text);
  box-shadow: 0 0 0 3px rgb(43 43 43 / 0.08);
  outline: none;
}

/* Choice tiles + number pills: solid when selected */
.listing-form-page .listing-type-option {
  min-height: 52px;
  border: 1px solid var(--pl-line);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}
.listing-form-page .listing-type-option:hover { border-color: var(--color-text); background-color: var(--color-surface); }
.listing-form-page .listing-type-option.selected {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: #fff;
}

.listing-form-page .pill-btn {
  min-width: 52px;
  min-height: 48px;
  border: 1px solid var(--pl-line);
  border-radius: var(--radius-md);
  font-size: 15px;
}
.listing-form-page .pill-btn:hover:not(.selected) { border-color: var(--color-text); background-color: var(--color-surface); }
.listing-form-page .pill-btn.selected {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: #fff;
}

/* Fees */
.listing-form-page .fee-cat { border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); }
.listing-form-page .fee-cat-head { background-color: var(--color-surface); }
.listing-form-page .fee-add-btn {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}
.listing-form-page .fee-add-btn:hover { background-color: var(--color-text); color: #fff; }

/* Uploads */
.listing-form-page .upload-zone {
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}
.listing-form-page .upload-zone:hover,
.listing-form-page .upload-zone.drag-over { border-color: var(--color-primary); background-color: var(--color-primary-subtle); }

.listing-form-page .wizard-feedback { border-radius: var(--radius-md); }


/* ─────────────────────────────────────────────────────────────
   Back / Next bar — stays in reach on long steps
   ─────────────────────────────────────────────────────────────*/
.listing-form-page .wizard-nav {
  position: sticky;
  bottom: 0;
  z-index: 20;
  max-width: none;
  margin: var(--space-10) 0 0;
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border);
  background-color: rgb(250 247 242 / 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.listing-form-page .wizard-nav .btn {
  flex: 0 0 auto;
  min-width: 140px;
  height: 48px;
  min-height: 48px;
  padding: 0 24px;
  border-width: 1px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
}
.listing-form-page #next-btn { margin-left: auto; }
.listing-form-page #back-btn { border-color: var(--color-text); color: var(--color-text); }
.listing-form-page #back-btn:hover { background-color: var(--color-text); color: #fff; }


/* ─────────────────────────────────────────────────────────────
   Live preview
   ─────────────────────────────────────────────────────────────*/
.pl-preview {
  position: sticky;
  top: calc(var(--header-height, 80px) + var(--space-8));
  padding-top: clamp(2rem, 4.5vw, 3.5rem);
}
.pl-preview-label {
  margin-bottom: var(--space-4);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.pl-card { display: flex; flex-direction: column; gap: 4px; }
.pl-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 14px;
  background-color: var(--color-surface-alt);
}
.pl-card-img img { width: 100%; height: 100%; object-fit: cover; }
.pl-card-img-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: 14px;
  font-size: 13px;
  color: var(--color-text-muted);
}
.pl-card-img-empty[hidden] { display: none; }
.pl-card-img-empty svg { width: 26px; height: 26px; }
.pl-card-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgb(250 247 242 / 0.94);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}
.pl-card-price {
  font-size: 17px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.pl-card-price span { margin-left: 2px; font-size: 14px; font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.pl-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
  color: var(--color-text);
}
.pl-card-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 13.5px;
  color: var(--color-text-secondary);
}
.pl-card-meta span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-card .is-placeholder { color: var(--color-text-muted); }

.pl-tip {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.pl-tip:empty { display: none; }
.pl-tip-label {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}


/* ─────────────────────────────────────────────────────────────
   Tablets + phones
   ─────────────────────────────────────────────────────────────*/
@media (max-width: 960px) {
  .pl-layout { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
  .pl-preview { display: none; }
}

/* The mobile bottom dock sits at the very bottom on phones,
   so the nav bar returns to normal flow there. */
@media (max-width: 680px) {
  .pl-layout { padding: 0 16px; }
  .listing-form-page .wizard-nav {
    position: static;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .listing-form-page .wizard-nav .btn { flex: 1; min-width: 0; }
}

/* Price fields: one rounded field with "KES" inside it */
.listing-form-page .price-input-wrapper {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--pl-line);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.listing-form-page .price-input-wrapper:hover { border-color: rgb(43 43 43 / 0.32); }
.listing-form-page .price-input-wrapper:focus-within {
  border-color: var(--color-text);
  box-shadow: 0 0 0 3px rgb(43 43 43 / 0.08);
}
.listing-form-page .price-prefix {
  display: flex;
  align-items: center;
  padding: 0 4px 0 16px;
  border: 0;
  background: none;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}
.listing-form-page .price-input-wrapper .form-input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.listing-form-page .price-input-wrapper .form-input:focus { box-shadow: none; }
.listing-form-page .price-input-wrapper input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.listing-form-page .price-input-wrapper input::-webkit-outer-spin-button,
.listing-form-page .price-input-wrapper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }