/* ============================================================
   COMPONENTS — buttons, fields, badges, property cards
   ============================================================ */

/* ---- Buttons ---------------------------------------------- */
.btn{
  --btn-fg:var(--paper);
  --btn-bg:var(--forest);
  position:relative;
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 26px;
  font-size:var(--t-micro);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  font-weight:500;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:1px solid transparent;
  overflow:hidden;
  isolation:isolate;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--forest-3);
  transform:scaleY(0); transform-origin:50% 100%;
  transition:transform var(--dur) var(--ease);
}
.btn:hover::after{ transform:scaleY(1); }
.btn .btn__arrow{ transition:transform var(--dur) var(--ease); display:inline-block; }
.btn:hover .btn__arrow{ transform:translate(4px,-4px); }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); border-color:var(--line-2); }
.btn--ghost::after{ background:var(--forest); }
.btn--ghost:hover{ color:var(--paper); border-color:var(--forest); }

.btn--light{ --btn-bg:var(--paper); --btn-fg:var(--ink); }
.btn--light::after{ background:var(--sand); }

.btn--outline-light{ --btn-bg:transparent; --btn-fg:var(--ink-on-dark); border-color:var(--line-dark-2); }
.btn--outline-light::after{ background:var(--paper); }
.btn--outline-light:hover{ color:var(--ink); border-color:var(--paper); }

.btn--sand{ --btn-bg:var(--sand); --btn-fg:var(--ink); }
.btn--sand::after{ background:var(--sand-2); }

.btn--block{ display:flex; width:100%; justify-content:space-between; }
.btn--lg{ padding:22px 34px; }

/* Text link with animated underline */
.link{
  display:inline-flex; align-items:center; gap:9px;
  font-size:var(--t-micro); letter-spacing:var(--track-label);
  text-transform:uppercase; font-weight:500;
  position:relative; padding-bottom:6px;
}
.link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; opacity:.35;
  transform:scaleX(1); transform-origin:100% 50%;
  transition:transform .5s var(--ease-inout);
}
.link:hover::after{ transform:scaleX(0); }
.link i{ font-style:normal; transition:transform var(--dur) var(--ease); }
.link:hover i{ transform:translate(4px,-4px); }

/* Icon button */
.icon-btn{
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line-2);
  display:grid; place-items:center;
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  flex:none;
}
.icon-btn:hover{ background:var(--forest); color:var(--paper); border-color:var(--forest); }
.icon-btn--light{ border-color:var(--line-dark-2); color:var(--ink-on-dark); }
.icon-btn--light:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

/* ---- Pills / badges --------------------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px;
  font-size:9px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  border:1px solid var(--line-2); color:var(--ink-70);
  background:transparent;
  transition:all var(--dur-fast) var(--ease);
}
.pill:hover{ border-color:var(--forest); color:var(--ink); }
.pill.is-on{ background:var(--forest); border-color:var(--forest); color:var(--paper); }

.tag{
  display:inline-block;
  padding:6px 10px;
  font-size:9px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  background:rgba(251,248,241,.94); color:var(--ink);
  backdrop-filter:blur(6px);
}
.tag--dark{ background:rgba(14,42,32,.82); color:var(--paper); }
.tag--clay{ background:var(--clay); color:var(--paper); }

.status-dot{
  display:inline-flex; align-items:center; gap:8px;
  font-size:9px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
}
.status-dot::before{
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none;
}
.status-dot[data-status="verified"]{ color:#3E7A5C; }
.status-dot[data-status="review"]{ color:#A8674C; }
.status-dot[data-status="pending"]{ color:var(--ocean-2); }

/* ---- Save (heart) ----------------------------------------- */
.save{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(251,248,241,.9);
  backdrop-filter:blur(6px);
  color:var(--ink);
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  flex:none;
}
.save svg{ width:15px; height:15px; }
.save:hover{ transform:scale(1.08); }
.save[aria-pressed="true"]{ background:var(--forest); color:var(--paper); }
.save[aria-pressed="true"] svg{ fill:currentColor; }

/* ---- Fields ----------------------------------------------- */
.field{ display:block; position:relative; }
.field > span{
  display:block; margin-bottom:9px;
  font-size:var(--t-micro); letter-spacing:var(--track-label);
  text-transform:uppercase; font-weight:500; color:var(--ink-55);
}
.field input,.field select,.field textarea{
  width:100%;
  background:transparent;
  border:0; border-bottom:1px solid var(--line-2);
  padding:11px 0;
  font-size:.9375rem;
  color:var(--ink);
  border-radius:0;
  transition:border-color var(--dur-fast) var(--ease);
  appearance:none;
}
.field textarea{ resize:vertical; min-height:96px; line-height:1.6; }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-38); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--forest);
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2314211C' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center;
  padding-right:22px; cursor:pointer;
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{ border-bottom-color:var(--clay); }
/* Specificity has to clear `.field > span` (the field label rule) and
   `.brief .field > span` (its on-dark variant), or the error text renders
   as a second label on every field. */
.field > span.field__error,
.brief .field > span.field__error{
  display:none; margin:8px 0 0;
  font-size:10px; letter-spacing:.05em; line-height:1.4;
  text-transform:none; font-weight:400; color:var(--clay);
}
.brief .field > span.field__error{ color:#DE9F80; }
.field[data-invalid="true"] > span.field__error{ display:block; }

.chipset{ display:flex; flex-wrap:wrap; gap:8px; }
.chipset .pill{ cursor:pointer; }

/* ---- Property card ---------------------------------------- */
.card{
  position:relative;
  display:flex; flex-direction:column;
  background:transparent;
}
.card__media{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--paper-2);
}
.card--wide .card__media{ aspect-ratio:16/11; }
.card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .8s var(--ease);
  filter:saturate(.86) contrast(1.02);
}
.card:hover .card__media img{ transform:scale(1.045); filter:saturate(1) contrast(1.02); }
.card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(14,42,32,.22) 0%,transparent 34%,transparent 62%,rgba(14,42,32,.34) 100%);
  opacity:.85; pointer-events:none;
}
.card__tags{
  position:absolute; top:14px; left:14px; z-index:2;
  display:flex; flex-wrap:wrap; gap:6px; max-width:calc(100% - 76px);
}
.card__save{ position:absolute; top:14px; right:14px; z-index:3; }
.card__cta{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:16px 18px;
  display:flex; justify-content:space-between; align-items:flex-end;
  color:var(--paper);
  opacity:0; transform:translateY(8px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover .card__cta,.card:focus-within .card__cta{ opacity:1; transform:none; }
.card__body{
  padding-top:18px;
  display:flex; flex-direction:column; gap:10px;
  border-top:1px solid var(--line);
  margin-top:18px;
}
.card__head{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; }
.card__title{
  font:300 clamp(1.35rem,1.7vw,1.7rem)/1.1 var(--serif);
  letter-spacing:-.02em;
}
.card__price{
  font-size:var(--t-small); font-weight:500; white-space:nowrap;
  letter-spacing:.01em;
}
.card__price small{ display:block; text-align:right; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-38); font-weight:400; margin-top:3px; }
.card__place{
  font-size:var(--t-micro); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink-55);
}
.card__desc{ font-size:var(--t-small); line-height:1.6; color:var(--ink-70); }
.card__specs{
  display:flex; flex-wrap:wrap; gap:6px 16px;
  font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-55);
  padding-top:4px;
}
.card__link{ position:absolute; inset:0; z-index:1; }

/* Card on dark ground */
.on-dark .card__body{ border-color:var(--line-dark); }
.on-dark .card__place,.on-dark .card__specs{ color:var(--ink-on-dark-40); }
.on-dark .card__desc{ color:var(--ink-on-dark-65); }
.on-dark .card__price small{ color:var(--ink-on-dark-40); }

/* ---- Spec list -------------------------------------------- */
.specs{ border-top:1px solid var(--line); }
.specs__row{
  display:grid; grid-template-columns:1fr auto; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--line);
  font-size:var(--t-small);
}
.specs__row dt{ color:var(--ink-55); }
.specs__row dd{ margin:0; text-align:right; font-weight:500; }
.on-dark .specs,.on-dark .specs__row{ border-color:var(--line-dark); }
.on-dark .specs__row dt{ color:var(--ink-on-dark-40); }

/* ---- Stat ------------------------------------------------- */
.stat__value{ font:300 clamp(1.8rem,2.6vw,2.6rem)/1 var(--serif); letter-spacing:-.02em; }
.stat__label{ margin-top:9px; font-size:var(--t-micro); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-55); }
.on-dark .stat__label{ color:var(--ink-on-dark-40); }

/* ---- Toast ------------------------------------------------ */
.toast{
  position:fixed; left:50%; bottom:34px; z-index:calc(var(--z-lightbox) + 10);
  transform:translate(-50%,140%);
  background:var(--charcoal); color:var(--paper);
  padding:14px 22px;
  font-size:var(--t-micro); letter-spacing:var(--track-label); text-transform:uppercase;
  transition:transform .6s var(--ease);
  pointer-events:none;
  max-width:calc(100vw - 40px);
}
.toast.is-on{ transform:translate(-50%,0); }