/* Classified offer page: the item is the subject (classifieds variant of core/module_detail.html).
   Shares the listing-detail frame; mango price tag and condition scale set it apart from shops and services. */
.cl-page, .vh-page { --cl-ink: #153e35; --cl-green: #145447; --cl-mango: #f4b544; --cl-mango-ink: #3f2c05; --cl-paper: #faf8f2; --cl-line: #e7e5df; --cl-muted: #64748b; }

/* Gallery: the whole item on a neutral surface instead of a blurred backdrop */
.cl-page .ld-stage { background: #efeae0; }
.cl-page .ld-stage::before { display: none; }

/* Buy box */
.cl-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0 8px; margin-bottom: 8px; }
.cl-top .ld-chips { margin-bottom: 0; padding-top: 4px; }
.cl-actions { display: flex; gap: 6px; flex-shrink: 0; margin-bottom: 4px; }
.cl-actions .favorite-form { margin: 0; }
.cl-actions .favorite-button, .cl-action {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 10px; border: 1px solid #cfd8d3;
  background: #fff; color: var(--cl-ink); font-weight: 700; font-size: 12px; text-decoration: none; cursor: pointer; line-height: 1.2;
}
.cl-actions .favorite-button::before { content: "♡"; font-size: 14px; line-height: 1; }
.cl-actions .favorite-button[aria-pressed="true"] { border-color: var(--cl-green); color: var(--cl-green); }
.cl-actions .favorite-button[aria-pressed="true"]::before { content: "♥"; }

.cl-pricing { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 4px 0 14px; }
.cl-price {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 18px 6px 12px;
  background: var(--cl-mango); color: var(--cl-mango-ink); border-radius: 8px 22px 22px 8px;
  font-size: 1.75rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.cl-price-hole { width: 9px; height: 9px; border-radius: 50%; background: var(--cl-paper); border: 1.5px solid rgba(63, 44, 5, .35); flex-shrink: 0; }
.cl-mode { padding: 3px 10px; border-radius: 999px; border: 1px solid #ecd9a8; background: #fff6df; color: #6b4b06; font-size: 12px; font-weight: 700; }
.cl-mode--fixed { border-color: #cfd8d3; background: #f4f2ec; color: var(--cl-ink); }

/* Condition: stated in words only (Novo, Como novo, Usado, Com danos) */
.cl-condition { margin: 0 0 14px; }
.cl-state { display: inline-block; margin: 0; padding: 4px 12px; border-radius: 999px; background: #f4f2ec; border: 1px solid var(--cl-line); font-size: 13px; color: var(--cl-muted); }
.cl-state strong { color: var(--cl-ink); }
.cl-damage { margin: 8px 0 0; padding: 8px 10px; border: 1px solid #f0c3b0; border-radius: 10px; background: #fdf1ec; color: #7a2e12; font-size: 12.5px; }

/* Item sheet */
.cl-sheet dl { margin: 0; }
.cl-sheet dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dashed var(--cl-line); font-size: 14px; }
.cl-sheet dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.cl-sheet dt { color: var(--cl-muted); }
.cl-sheet dd { margin: 0; color: var(--cl-ink); font-weight: 600; text-align: right; }
.cl-ref { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* Safe meeting and report */
.cl-safe { background: #fffaf0; border-color: #f2dfb0; }
.cl-safe h2 { color: #5c4a12; }
.cl-safe ul { margin: 0; padding-left: 18px; color: #5c4a12; font-size: 13px; line-height: 1.55; }
.cl-safe li + li { margin-top: 3px; }
.cl-report { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #ecd9a8; font-size: 13px; }
.cl-report summary { cursor: pointer; color: #a3341d; font-weight: 700; width: max-content; }
.cl-report form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.cl-report fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; }
.cl-report legend { font-weight: 700; color: var(--cl-ink); margin-bottom: 4px; }
.cl-report label { color: #334155; }
.cl-report-note { display: grid; gap: 4px; }
.cl-report textarea { width: 100%; border: 1px solid #d9d4c7; border-radius: 10px; padding: 8px 10px; font: inherit; background: #fff; }
.cl-report .ld-btn { padding: 10px 14px; font-size: 14px; }
.cl-report-error { margin: 0; color: #a3341d; }
.cl-report-done { margin: 10px 0 0; color: var(--cl-green); font-weight: 700; }

/* Two cards on the right are taller than the sticky box was designed for */
@media (min-width: 900px) { .cl-page .ld-side { position: static; } }

.cl-similar-price { align-self: flex-start; padding: 1px 9px; border-radius: 4px 12px 12px 4px; background: var(--cl-mango); color: var(--cl-mango-ink); font-weight: 800; font-size: 13px; }

/* WhatsApp opening line: radio chips, no script needed (htmx includes the checked one) */
.cl-presets { margin: 0 0 12px; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cl-presets legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--cl-muted); }
.cl-presets label { cursor: pointer; }
.cl-presets input { position: absolute; opacity: 0; pointer-events: none; }
.cl-presets span { display: inline-block; padding: 5px 11px; border: 1px solid #cfd8d3; border-radius: 999px; background: #fff; color: var(--cl-ink); font-size: 12.5px; font-weight: 600; }
.cl-presets input:checked + span { border-color: var(--cl-green); background: var(--cl-green); color: #fff; }
.cl-presets input:focus-visible + span { outline: 2px solid var(--cl-mango); outline-offset: 2px; }

/* Seller card */
.cl-seller { display: flex; align-items: center; gap: 14px; }
.cl-avatar { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #dcebe5; color: var(--cl-green); font-size: 20px; font-weight: 800; }
.cl-seller-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cl-muted); }
.cl-seller-name { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--cl-ink); }
.cl-seller-facts { list-style: none; margin: 4px 0 0; padding: 0; color: var(--cl-muted); font-size: 13px; line-height: 1.5; }

/* Lifecycle: state banner, muted price and owner panel */
.cl-banner { margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; border: 1px solid #ecd9a8; background: #fff6df; color: #5c4a12; font-weight: 700; }
.cl-banner--sold_or_rented, .cl-banner--withdrawn, .cl-banner--expired { border-color: #d9d4c7; background: #efeae0; color: #3a403d; }
.cl-page.is-sold_or_rented .cl-price, .cl-page.is-withdrawn .cl-price, .cl-page.is-expired .cl-price { background: #d9d4c7; color: #5f5e5a; text-decoration: line-through; }
.cl-page.is-sold_or_rented .ld-stage-img, .cl-page.is-withdrawn .ld-stage-img, .cl-page.is-expired .ld-stage-img { filter: grayscale(.85); }
.cl-owner-status { margin: 0 0 12px; }
.cl-owner-actions { display: flex; flex-direction: column; gap: 8px; }
.cl-owner-actions .ml-action { margin: 0; }
.cl-owner-actions .ld-btn { padding: 10px 14px; font-size: 14px; }
.cl-owner-link { display: inline-block; margin-top: 12px; color: var(--cl-green); font-weight: 700; font-size: 13px; }
.cl-owner-stats { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; color: var(--cl-muted); line-height: 1.6; }
.cl-owner-stats b { color: var(--cl-ink); }