/*
 * app-refresh.css — presentation fixes layered on top of app-polish.css.
 *
 * Loaded last. Everything here is additive: removing this one stylesheet
 * link returns the site to its previous look.
 *
 *   1. Home screen: readable logo, tappable search pill
 *   2. Listing cards: HK$ prices, /mo for rentals, two-line address, save button
 *   3. Listing details: HK$ price, contact bar fallback, smaller Ask Eric button
 *   4. Filter sheet: same button and tile language as the search sheet
 *   5. Map markers: comfortable tap targets
 *   6. Keyboard focus and reduced motion
 */

:root {
  --rf-accent: var(--ui-accent, #1473e6);
  --rf-accent-strong: var(--ui-accent-strong, #0b5fc2);
  --rf-text: var(--ui-text, #172033);
  --rf-muted: var(--ui-muted, #667085);
  --rf-border: var(--ui-border, #dfe5ec);
  --rf-surface: var(--ui-surface, #ffffff);
  --rf-surface-muted: var(--ui-surface-muted, #eef2f6);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ───────────────────────── 1. Home screen ───────────────────────── */

/* "anime" was dark grey on navy (contrast about 1.6:1). */
body.app-ui #initial-content #loader-logo-text {
  color: #f1f5fb !important;
}

body.app-ui #initial-content #loader-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px 12px 16px;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
  color: #ffffff !important;
  font-size: clamp(14px, 3.8vw, 17px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.app-ui #initial-content #loader-text::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.7 16.7 21 21'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.7 16.7 21 21'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.app-ui #initial-content #loader-text:active {
  background: rgba(255, 255, 255, .18);
}

/* ───────────────────────── 2. Listing cards ───────────────────────── */

/* "$25,000" → "HK$25,000", and "/mo" on rentals. Added with CSS so the
   scripts that read the price text keep seeing exactly what they expect. */
.Homecard:not([data-price="0"]) .listing-list-price > span:first-child::before,
.price-amount::before {
  content: none;
}

.Homecard[data-ad-type="2"]:not([data-price="0"]) .listing-list-price > span:first-child::after,
.price-amount[data-ad-type="2"]::after {
  content: " /mo";
  font-size: .58em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--rf-muted);
}

/* Long addresses wrap to a second line instead of being cut off. */
html:root:is([data-theme], :not([data-theme])) body.app-ui .Homecard :is(.listing-list-address, .premium-list-address) {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Visible save button on every card photo. */
.card-save-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #1b2636;
  box-shadow: 0 2px 8px rgba(8, 20, 40, .22);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background-color .15s ease, color .15s ease;
}

.card-save-btn:active { transform: scale(.9); }

.Homecard[data-saved="1"] .card-save-btn {
  background: #e63e32;
  color: #ffffff;
}

.Homecard[data-saved="1"] .card-save-btn path {
  fill: currentColor;
}

/* The button now shows the saved state, so the old corner flag is not needed. */
.card-save-btn ~ .saved-flag { display: none !important; }

/* Short cards have a small photo: use a smaller button there. */
.homecard-short .card-save-btn {
  top: 6px;
  right: 6px;
  width: 34px;
  height: 34px;
}

.homecard-short .card-save-btn svg { width: 19px; height: 19px; }

/* Brokers manage listings rather than save them. */
#agentlisting-content .card-save-btn { display: none; }

html[data-theme="night"] .card-save-btn {
  background: rgba(20, 28, 40, .88);
  color: #f1f5fb;
}

/* ───────────────────────── 3. Listing details ───────────────────────── */

#listingDetailsModal #modal-price .price-amount { white-space: nowrap; }

/* Contact bar shown when a listing has no agent details: one clear action. */
#listingDetailsModal .details-persistent-contact__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--rf-accent);
  color: #ffffff !important;
  font: 650 15px/1.2 var(--ui-font, system-ui, sans-serif);
  text-decoration: none !important;
  white-space: nowrap;
}

#listingDetailsModal .details-persistent-contact__cta:active {
  background: var(--rf-accent-strong);
}

html[data-theme="night"] #listingDetailsModal .details-persistent-contact__cta {
  color: #0b1b33 !important;
}

/* Ask Eric: 70px circle covered card content; 56px keeps it clear. */
button.eric-launcher.eric-launcher {
  width: 56px;
  height: 56px;
  gap: 0;
  padding: 4px;
  font-size: 9.5px;
  line-height: 1.1;
  box-shadow: 0 4px 14px rgba(16, 42, 73, .3);
}

button.eric-launcher.eric-launcher svg {
  width: 21px;
  height: 21px;
}

/* ───────────────────────── 4. Filter sheet ───────────────────────── */

#filterModal .filter-group > label {
  color: var(--rf-text);
}

/* Bedrooms: rounded segmented control in the site accent colour. */
html:not([data-theme="night"]) #filterModal .bedroom-btn {
  min-height: 44px;
  border-color: var(--rf-border);
  background: var(--rf-surface);
  color: var(--rf-text);
  font-size: 15px;
}

#filterModal .bedroom-btn:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

#filterModal .bedroom-btn:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

#filterModal .bedroom-btn.active {
  background: var(--rf-accent) !important;
  border-color: var(--rf-accent) !important;
  color: #ffffff !important;
}

html:not([data-theme="night"]) #filterModal .dropdown-button {
  min-height: 44px;
  border-color: var(--rf-border);
  border-radius: 12px;
  background: var(--rf-surface);
  color: var(--rf-text);
}

/* Property type and feature tiles: selected reads as selected (accent tint
   and border) instead of grey, which looked switched off. */
html:not([data-theme="night"]) #filterModal :is(.property-type-btn, .features-property-type-btn) {
  border: 1.5px solid var(--rf-border);
  border-radius: 14px;
  background: var(--rf-surface);
  color: var(--rf-muted);
}

html:not([data-theme="night"]) #filterModal :is(.property-type-btn, .features-property-type-btn):has(input[type="checkbox"]:checked) {
  border-color: var(--rf-accent);
  background: color-mix(in srgb, var(--rf-accent) 9%, #ffffff);
  color: var(--rf-accent-strong);
}

html[data-theme="night"] #filterModal :is(.property-type-btn, .features-property-type-btn):has(input[type="checkbox"]:checked) {
  outline: 1.5px solid var(--rf-accent);
  outline-offset: -1.5px;
}

/* Let long type names ("Home Ownership Scheme") use a third line. */
#filterModal :is(.property-type-btn, .features-property-type-btn) :is(span, p) {
  -webkit-line-clamp: 3;
  font-size: 13px;
  line-height: 1.2;
}

#filterModal .exact-match {
  min-height: 40px;
  margin-top: 6px;
}

#filterModal .exact-match input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--rf-accent);
}

#filterModal .filter-actions .btn#applyFilters,
#filterModal .filter-actions #applyFilters {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--rf-accent) !important;
  color: #ffffff !important;
  font-weight: 650;
  font-size: 16px;
}

#filterModal .filter-actions #applyFilters:active {
  background: var(--rf-accent-strong) !important;
}

#filterModal #resetFilters {
  min-height: 44px;
  padding: 0 6px;
  color: var(--rf-accent);
  font-size: 15px;
  font-weight: 600;
}

/* ───────────────────────── 5. Map markers ───────────────────────── */

/* 20–24px dots are hard to hit; this adds an invisible 40px touch area. */
.leaflet-marker-icon.custom-div-icon::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}

.leaflet-marker-icon.custom-div-icon.active-marker > div {
  outline: 3px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 5px rgba(20, 115, 230, .45) !important;
}

/* ───────────────────────── 6. Focus and motion ───────────────────────── */

body.app-ui :is(button, a, [role="button"], [tabindex="0"]):focus-visible {
  outline: 3px solid #78baff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .card-save-btn {
    transition: none !important;
  }
}

/* Night theme: the accent is a light blue, so text on it must be dark. */
html[data-theme="night"] #filterModal .filter-actions #applyFilters,
html[data-theme="night"] #filterModal .filter-actions .btn#applyFilters {
  color: #0b1b33 !important;
}

/* ───────────────────────── 7. No results ───────────────────────── */

/* Any search with nothing to show: a clear message instead of a blank list. */
.results-empty-state {
  margin: 16px 12px;
  padding: 18px 16px;
  border: 1px solid var(--rf-border);
  border-radius: 16px;
  background: var(--rf-surface);
  color: var(--rf-text);
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
}

.results-empty-state p { margin: 0; }

.results-empty-state .results-retry-button,
.results-empty-state .ai-empty-retry {
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--rf-accent);
  color: #ffffff;
  font: 650 15px/1.2 var(--ui-font, system-ui, sans-serif);
  cursor: pointer;
}

/* AI search with no matches: Eric's card, a tip, and a way back to change the search. */
.results-empty-state:has(.ai-empty) {
  padding: 0;
  border: 0;
  background: transparent;
}

.ai-empty .ai-empty-card {
  margin: 0;
  text-align: left;
  animation: none;
}

.ai-empty .eric-progress-sub b { color: var(--rf-text); font-weight: 650; }

.ai-empty-tips {
  margin: 12px 4px 0 !important;
  color: var(--rf-muted);
  font-size: 13.5px;
}

html[data-theme="night"] .results-empty-state .results-retry-button,
html[data-theme="night"] .results-empty-state .ai-empty-retry {
  color: #0b1b33;
}