/*!
 * Control Pro — listing availability (MM-ENG-01 E2), public site. Self-contained (cpa-*): the Sold /
 * Reserved badge on listing cards, the listing-page banner, the note that replaces the contact block
 * of a sold listing, and the seller's controls. Colours meet WCAG AA on their backgrounds; touch
 * targets are at least 44px; the state is always written, never shown by colour alone.
 */
:root {
  --cpa-sold: #b42318;
  --cpa-sold-soft: #fef3f2;
  --cpa-sold-line: #fda29b;
  --cpa-sold-ink: #912018;
  --cpa-reserved: #b54708;
  --cpa-reserved-soft: #fffaeb;
  --cpa-reserved-line: #fedf89;
  --cpa-reserved-ink: #93370d;
  --cpa-available: #067647;
  --cpa-available-soft: #ecfdf3;
  --cpa-available-line: #abefc6;
  --cpa-text: #1d2939;
  --cpa-muted: #667085;
  --cpa-line: #d0d5dd;
  --cpa-surface: #ffffff;
  --cpa-radius: 10px;
}

/* ------------------------------------------------------------------ card badge */

/*
 * The card badge sits at the photo's bottom-left; the favorites heart (MM-FAV-01) holds the top-right
 * 48px square. Where the label cannot sit beside the heart the badge shows its icon alone, and the
 * label stays in the text for screen readers: a container query decides by the photo's width without
 * JavaScript (170px fits the longest label, "RISERVATO", beside the heart), and cp-availability.js
 * refines it on the real boxes — the label comes back when it fits beside or below the heart
 * (.cpa-badge--text), the icon is forced when even a wide photo is too short (.cpa-badge--icon).
 * `container-type` leaves every Sahara card box unchanged (measured on all card layouts).
 */
.cpf-media { position: relative; container-type: inline-size; }
.cpa-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .02em; text-transform: uppercase;
  color: #fff; border-radius: 999px; padding: 6px 10px; white-space: nowrap;
}
.cpa-badge--sold { background: var(--cpa-sold); }
.cpa-badge--reserved { background: var(--cpa-reserved); }
.cpa-badge--card {
  position: absolute; left: 6px; bottom: 6px; z-index: 4;
  padding: 5px 10px 5px 7px; box-shadow: 0 1px 2px rgba(16, 24, 40, .25); pointer-events: none;
}
.cpa-badge__icon { flex: 0 0 auto; display: block; }
.cpa-badge--icon { padding: 5px; }
.cpa-badge--icon .cpa-badge__text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@container (max-width: 169.98px) {
  .cpa-badge--card:not(.cpa-badge--text) { padding: 5px; }
  .cpa-badge--card:not(.cpa-badge--text) .cpa-badge__text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
.cpa-badge--inline { vertical-align: middle; margin: 0 6px 0 0; padding: 4px 8px; font-size: 11px; }

/* ------------------------------------------------------------------ listing-page banner */

.cpa-banner {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 10px 0 14px; padding: 12px 14px; border-radius: var(--cpa-radius);
  border: 1px solid; font-size: 14px; line-height: 1.45;
}
.cpa-banner--sold { background: var(--cpa-sold-soft); border-color: var(--cpa-sold-line); color: var(--cpa-sold-ink); }
.cpa-banner--reserved { background: var(--cpa-reserved-soft); border-color: var(--cpa-reserved-line); color: var(--cpa-reserved-ink); }
.cpa-banner__icon { flex: 0 0 auto; margin-top: 1px; }
.cpa-banner__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cpa-banner__title { font-size: 15px; font-weight: 700; }
.cpa-banner__text { overflow-wrap: anywhere; }

.cpa-sold-note {
  margin: 8px 0; padding: 10px 12px; border-radius: var(--cpa-radius);
  background: var(--cpa-sold-soft); color: var(--cpa-sold-ink); border: 1px solid var(--cpa-sold-line);
  font-size: 14px; line-height: 1.45;
}

/* ------------------------------------------------------------------ seller controls */

.cpa-owner {
  margin: 10px 0; padding: 12px 14px; border: 1px solid var(--cpa-line); border-radius: var(--cpa-radius);
  background: var(--cpa-surface); color: var(--cpa-text); font-size: 14px; line-height: 1.45;
}
.cpa-owner--row { margin: 8px 0 0; padding: 8px 10px; }
/* My listings, list layout: the row is a grid (VP-013 — title, price, description, footer; the price
   tag in an auto-width second column). Unplaced, the panel fell into that price column on a phone and
   squeezed the price; it gets the free 1fr row between the description and the footer, full width. */
.list-product > .product-tengah > .cpa-owner--row { grid-column: 1 / -1; grid-row: 4; align-self: start; margin: 4px 0 2px; }
.cpa-owner__state { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cpa-owner--row .cpa-owner__state { margin-bottom: 6px; }
.cpa-owner__label { color: var(--cpa-muted); }
.cpa-owner__since { color: var(--cpa-muted); font-size: 13px; }
.cpa-owner__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cpa-owner__hint { margin: 8px 0 0; color: var(--cpa-muted); font-size: 13px; }
.cpa-form { margin: 0; display: inline-block; }

.cpa-pill {
  display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px;
  font-size: 13px; font-weight: 600; border: 1px solid;
}
.cpa-pill--available { background: var(--cpa-available-soft); color: var(--cpa-available); border-color: var(--cpa-available-line); }
.cpa-pill--reserved { background: var(--cpa-reserved-soft); color: var(--cpa-reserved-ink); border-color: var(--cpa-reserved-line); }
.cpa-pill--sold { background: var(--cpa-sold-soft); color: var(--cpa-sold-ink); border-color: var(--cpa-sold-line); }

.cpa-btn {
  min-height: 44px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--cpa-line);
  background: var(--cpa-surface); color: var(--cpa-text); font-size: 14px; font-weight: 600; line-height: 1.2;
  cursor: pointer; white-space: normal; text-align: center;
}
.cpa-owner--row .cpa-btn { min-height: 40px; padding: 6px 12px; font-size: 13px; }
.cpa-btn:hover { border-color: #98a2b3; }
.cpa-btn:focus-visible { outline: 3px solid #84adff; outline-offset: 2px; }
.cpa-btn--sold { background: var(--cpa-sold); border-color: var(--cpa-sold); color: #fff; }
.cpa-btn--sold:hover { background: var(--cpa-sold-ink); border-color: var(--cpa-sold-ink); }
.cpa-btn--reserved { color: var(--cpa-reserved-ink); border-color: var(--cpa-reserved-line); background: var(--cpa-reserved-soft); }
.cpa-btn--available { color: var(--cpa-available); border-color: var(--cpa-available-line); background: var(--cpa-available-soft); }
.cpa-btn[disabled] { opacity: .6; cursor: progress; }

@media (max-width: 480px) {
  .cpa-owner__actions { flex-direction: column; }
  .cpa-owner__actions .cpa-form, .cpa-owner__actions .cpa-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cpa-btn { transition: none; }
}