/* ============================================================
   Post-Requirement inline promo card (property listing).
   Ported from the "state 4 / inline form" card in the design set:
   Claude-Designs/DreamAcco-Latest-Designs-Claude/website/req-prompt.css
   ============================================================ */

/* min-width: 0 opts this grid item out of the default `min-width: auto`, which
   otherwise sizes a `1fr` track to the item's max-content width — i.e. without this,
   any unbreakable-ish content deep inside the card (long address, budget input, etc.)
   would silently force `.property-listings`' single mobile column wider than the
   viewport, causing the horizontal-scroll bug. Scoped to just this grid item rather
   than changing `.property-listings`' shared grid-template-columns, so property cards
   elsewhere are unaffected. */
.req-promo-slot { grid-column: 1 / -1; min-width: 0; }
.req-promo-slot--mobile { display: none; }

.req-promo {
  position: relative;
  background: linear-gradient(100deg, #FFF6E8 0%, #FFFFFF 58%);
  border: 1.5px solid #F6DDB2;
  border-radius: 18px;
  padding: 22px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  font-family: 'DM Sans', sans-serif;
}
.req-promo-head { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; min-width: 0; }
.req-promo-t { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.req-promo-t h3 {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.35;
}
.req-promo-t h3 b { color: #B6611A; font-weight: 800; }
.req-promo-t p { font-size: 13.5px; color: #777; margin: 0; }

.req-promo-where { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; flex-shrink: 0; min-width: 0; padding-right: 26px; }
.req-promo-lock {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #F0DCBE; border-radius: 999px;
  padding: 6px 12px; font-weight: 600; font-size: 12.5px; color: #444; white-space: nowrap;
}
.req-promo-lock svg { color: #B6611A; flex-shrink: 0; }
.req-promo-lock--edit { cursor: pointer; transition: .12s; min-width: 0; max-width: 100%; }
.req-promo-lock--edit:hover { border-color: #FF9A1F; color: #B6611A; }
.req-promo-lock--edit svg:last-child { color: #999; flex-shrink: 0; }
.req-promo-lock--edit:hover svg:last-child { color: #B6611A; }
/* Safety net: even the shortened first-segment address (see req-promo-card.blade.php)
   can still be long, and an edited/typed address has no length guarantee at all — this
   caps it to an ellipsis instead of forcing the button (and the grid row) wider than
   the viewport, which is what broke the mobile layout before. */
.req-promo-lock--edit [data-req-promo-addr-val] {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 auto; min-width: 0; max-width: 100%; vertical-align: middle;
}
.req-promo-addr { display: inline-flex; min-width: 0; max-width: 100%; }
.req-promo-addr-input {
  height: 34px; min-width: 210px; border: 1px solid #FF9A1F; border-radius: 999px;
  padding: 0 14px; outline: none; background: #fff; font-weight: 600; font-size: 12.5px;
  color: #1a1a1a; box-shadow: 0 0 0 3px #FFF1DA; font-family: 'DM Sans', sans-serif;
}
.req-promo [hidden] { display: none; }
.req-promo-full { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12.5px; color: #B6611A; white-space: nowrap; text-decoration: none; }
.req-promo-full:hover { color: #FF9A1F; }

.req-promo-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px; min-width: 0; }
.req-promo-f { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.req-promo-f > span.lb { font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #999; }
.req-promo-f > span.lb em { font-style: normal; color: #B6611A; text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; margin-left: 6px; }
.req-promo-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.req-promo-opt {
  display: inline-flex; align-items: center; gap: 6px; background: #fff;
  border: 1px solid #DCE6EE; border-radius: 9px; padding: 8px 12px;
  font-weight: 600; font-size: 13px; color: #444; transition: .12s; white-space: nowrap;
  font-family: 'DM Sans', sans-serif; cursor: pointer;
}
.req-promo-opt:hover { border-color: #FF9A1F; color: #B6611A; }
.req-promo-opt.on { background: #FFF1DA; border-color: #FF9A1F; color: #B6611A; font-weight: 700; box-shadow: 0 2px 6px rgba(255,154,31,.22); }

.req-promo-budget {
  display: flex; align-items: center; gap: 0; background: #fff; border: 1px solid #DCE6EE;
  border-radius: 10px; height: 44px; padding: 0 14px; transition: .12s; min-width: 200px;
}
.req-promo-budget:focus-within { border-color: #FF9A1F; box-shadow: 0 0 0 3px #FFF1DA; }
.req-promo-budget .cur { font-weight: 800; font-size: 15px; color: #1a1a1a; margin-right: 8px; }
.req-promo-budget input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-weight: 600; font-size: 14.5px; color: #1a1a1a; font-family: 'DM Sans', sans-serif;
}
.req-promo-budget .per { font-size: 12.5px; color: #999; white-space: nowrap; }
.req-promo-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.req-promo-quick button {
  font-weight: 600; font-size: 12px; color: #B6611A; background: #FFF8EC;
  border: 1px solid #F3E2C6; border-radius: 7px; padding: 5px 9px; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}
.req-promo-quick button:hover { background: #FFF1DA; }

.req-promo-go { margin-left: auto; display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.req-promo-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 26px; border-radius: 13px; background: #FF9A1F; color: #fff;
  font-weight: 800; font-size: 15.5px; letter-spacing: -0.01em;
  box-shadow: 0 8px 20px rgba(255,154,31,.4); white-space: nowrap; transition: .13s;
  border: none; cursor: pointer; font-family: 'DM Sans', sans-serif;
}
.req-promo-submit:hover { background: #B6611A; }
.req-promo-submit:disabled { background: #C6D6E2; box-shadow: none; cursor: not-allowed; }
.req-promo-note { font-size: 11.5px; color: #999; text-align: center; }
.req-promo-err { font-size: 12.5px; font-weight: 600; color: #C0505A; }

.req-promo-x {
  position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #999; transition: .12s;
  background: none; border: none; cursor: pointer;
}
.req-promo-x:hover { background: #fff; color: #1a1a1a; }

/* posted confirmation (unused for now — the grid simply refreshes without the promo
   cards once the 30-day gate kicks in, see public/js/req-promo.js) */
.req-promo.done { flex-direction: row; align-items: center; gap: 16px; padding: 20px 26px; background: #F3FAF6; border-color: #C7E7D5; }

@media (max-width: 768px) {
  .req-promo-slot--desktop { display: none; }
  .req-promo-slot--mobile { display: block; }

  .req-promo { padding: 18px 16px 20px; border-radius: 16px; gap: 16px; }
  /* align-items: stretch (overriding the desktop row layout's flex-start) so
     .req-promo-t/.req-promo-where actually get constrained to the card's width in
     this column layout, instead of sizing to their own content and silently
     overflowing past the card's edge — see the min-width:0 comment near the top
     of this file for the related grid-sizing half of this same class of bug. */
  .req-promo-head { flex-direction: column; align-items: stretch; gap: 12px; }
  /* .req-promo-t's desktop "flex: 1 1 360px" sets a 360px flex-basis meant as a
     minimum row WIDTH; once .req-promo-head becomes a column above, flex-basis
     switches to the main (vertical) axis, forcing it to a 360px-tall box with mostly
     empty space below the (much shorter) title/subtitle text — hence the dead gap
     down to the city chips. Reset to natural content height on mobile. */
  .req-promo-t { flex: 0 1 auto; }
  .req-promo-t h3 { font-size: 16.5px; padding-right: 26px; }
  .req-promo-where { width: 100%; padding-right: 0; }
  .req-promo-addr { flex: 1 1 100%; min-width: 0; }
  .req-promo-lock--edit { width: 100%; }
  .req-promo-addr-input { min-width: 0; width: 100%; }
  .req-promo-body { flex-direction: column; align-items: stretch; gap: 16px; }
  .req-promo-budget { min-width: 0; }
  .req-promo-go { margin-left: 0; }
  .req-promo-submit { width: 100%; }
}