/* RentHub360 responsive polish: card CTA (lock), saved grid, floating widgets.
   Design only. Loaded from header.php so every page gets it. */

/* "Contact owner · Pro" lock button — keep icon + label on one line */
.rh-card-cta { white-space: nowrap; gap: 6px; }
.rh-card-cta svg { width: 16px !important; height: 16px !important; flex: 0 0 16px; margin: 0 !important; }
.rh-card-actions--pair .rh-card-ghost,
.rh-card-actions--pair .rh-card-cta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) {
  .rh-flats .rh-card-actions--pair,
  .rh-card-actions--pair { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 8px; }
  .rh-flats .rh-card-actions--pair .rh-card-ghost,
  .rh-flats .rh-card-actions--pair .rh-card-cta,
  .rh-card-actions--pair .rh-card-ghost,
  .rh-card-actions--pair .rh-card-cta { font-size: 14px; padding: 0 8px; height: 46px; }
  .rh-flats .rh-card .rh-card-body { padding: 14px 14px 12px; }
}
@media (max-width: 340px) {
  .rh-flats .rh-card-actions--pair, .rh-card-actions--pair { grid-template-columns: 1fr; }
}

/* Lock pill next to masked phone numbers (property page) */
.phone-unlock-pill { white-space: nowrap; flex: 0 0 auto; }
.phone-unlock-pill svg { width: 12px; height: 12px; margin: 0 !important; }

/* Saved page: real responsive grid (inline minmax(300px) overflowed small phones) */
#savedPropertyGrid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)) !important;
  gap: 16px !important;
}
.refer-container .refer-title { flex-wrap: wrap; font-size: clamp(24px, 6vw, 34px); }
#empty-card { max-width: 560px; margin-left: auto; margin-right: auto; }
#empty-card .copy-button { width: auto; }

/* Floating chat / WhatsApp: smaller on phones so they cover less of the cards */
@media (max-width: 600px) {
  .rh-wa-float { width: 48px !important; height: 48px !important; right: 12px !important; }
  .ai-chat-bubble { width: 48px !important; height: 48px !important; right: 12px !important; }
  main, .container { padding-bottom: env(safe-area-inset-bottom); }
}

/* Saved page empty state: centred card, vertically-centred button, logo orange */
.rh-flats #empty-card,
#empty-card {
  display: flex; flex-direction: column; align-items: center !important; justify-content: center;
  width: 100% !important; max-width: 560px; min-height: 0 !important; margin: 24px auto 40px !important;
  padding: 36px 24px !important; text-align: center; box-sizing: border-box;
}
#empty-card h3 { margin: 0 0 10px !important; font-size: 22px; line-height: 1.25; font-weight: 800; color: #0f172a; }
#empty-card p { margin: 0 0 22px !important; font-size: 15px; line-height: 1.55; color: #64748b; max-width: 36ch; }
.rh-flats #empty-card .copy-button,
#empty-card .copy-button {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  width: auto !important; min-width: 0; height: 50px; padding: 0 26px !important; line-height: 1;
  font-size: 16px !important; font-weight: 800 !important; text-decoration: none;
  background: linear-gradient(180deg, #FFA31F 0%, #FC8C00 100%) !important; color: #fff !important;
  border: 0 !important; border-radius: 12px !important; box-shadow: 0 6px 16px rgba(252, 140, 0, 0.3);
}
@media (max-width: 480px) {
  #empty-card { padding: 28px 18px !important; margin: 16px auto 28px !important; }
  #empty-card .copy-button { width: 100% !important; }
}

/* Browse map view (non-Pro lock card): clean, centred, logo orange.
   Hides the floating Reset/Fullscreen bar that used to show blurred
   behind the lock and keeps the card clear of the chat/WhatsApp bubbles. */
.map-view-column:has(.map-pro-gate) .map-floating-bar { display: none !important; }
.map-pro-gate {
  align-items: flex-start !important; justify-content: center !important;
  padding: 28px 16px 16px !important; box-sizing: border-box;
}
.map-pro-gate > div {
  width: 100%; max-width: 320px !important; box-sizing: border-box;
  padding: 22px 20px !important; border-radius: 18px !important; gap: 10px !important;
}
.map-pro-gate > div > div:nth-of-type(1) { font-size: 17px !important; line-height: 1.25; }
.map-pro-gate > div > div:nth-of-type(2) { font-size: 14px !important; line-height: 1.5; font-weight: 500 !important; }
.map-pro-gate button {
  width: 100%; min-height: 46px; border-radius: 12px !important; font-size: 15px !important;
  background: linear-gradient(180deg, #FFA31F 0%, #FC8C00 100%) !important; color: #fff !important;
  box-shadow: 0 6px 16px rgba(252, 140, 0, 0.3);
}
@media (max-width: 992px) {
  .flats-split-layout.split-active .map-view-column {
    border: 1.5px solid #e2e8f0 !important;
    height: min(520px, 72vh) !important; min-height: 380px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1) !important;
  }
}

/* Dark mode inverts the whole page (theme-init.php), which turned our orange
   buttons muddy brown with dark text. Counter-invert the solid orange CTAs
   (same trick the site uses for photos) so they keep the true logo orange
   with white text in both themes. */
html[data-theme="dark"] .map-pro-gate button,
html[data-theme="dark"] #empty-card .copy-button,
html[data-theme="dark"] .rh-card-cta--pro,
html[data-theme="dark"] .rh-card-cta--primary,
html[data-theme="dark"] .rh-post-btn,
html[data-theme="dark"] .ml-post,
html[data-theme="dark"] .rentx-proceed-button,
html[data-theme="dark"] .rentx-property-page .rentx-progress-fill,
html[data-theme="dark"] .rentx-property-page .rentx-step-button.active::before {
  filter: invert(1) hue-rotate(180deg) contrast(1.111);
}

/* The empty-state card must stay hidden when app.js hides it (saved items exist) */
#empty-card[style*="display: none"], #empty-card[style*="display:none"] { display: none !important; }

/* Home page (mobile): "How it works" timeline + "Experience the new way of living" */
@media (max-width: 700px) {
  .timeline-container { padding-left: 40px; max-width: 100%; box-sizing: border-box; }
  .timeline-line { left: 14px !important; }
  .timeline-step {
    display: flex; flex-direction: column !important; align-items: stretch !important;
    gap: 12px; position: relative; margin-bottom: 30px; transform: none !important; text-align: left;
  }
  .timeline-step .step-media { order: 1; width: 100% !important; }
  .timeline-step .step-card { order: 2; width: 100% !important; box-sizing: border-box; padding: 16px 18px; }
  .timeline-step .step-dot { position: absolute; left: -33px; top: 10px; margin: 0; }
  .step-img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .step-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
  .step-card p { font-size: 0.95rem; line-height: 1.5; margin: 0; }

  .experience-section { padding: 3rem 1rem; }
  .experience-title { font-size: 1.7rem; line-height: 1.25; margin-bottom: 1.5rem; }
  .feature-collage-card { padding: 1.25rem 1rem; border-radius: 20px; margin-bottom: 3rem; }
  .collage-badge { margin: 4px; padding: 8px 12px; font-size: 0.82rem; border-radius: 10px; }
  .collage-images-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 1.25rem; }
  .col-img { height: 130px; }
  .reviews-title { font-size: 1.7rem; margin-bottom: 1.5rem; }
}