/* ==========================================================================
   apartmentsforsale.in — sticky mobile action bar
   /assets/afs-actionbar.css
   ========================================================================== */

/* Reserve the space in CSS, BEFORE the JS runs.
   If we let JS add the bar and then push the content, that's a layout shift
   and it costs us CLS. This way the space is always there on mobile and the
   bar simply fills it. CLS stays at 0.0000. */
@media (max-width: 900px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

.afs-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line, #E4E0D6);
  border-top: 1px solid var(--line, #E4E0D6);
  padding-bottom: env(safe-area-inset-bottom, 0px);   /* iPhone home bar */
  box-shadow: 0 -4px 20px rgba(13, 27, 42, .10);
  transform: translateY(0);
  transition: transform .25s ease;
}

/* Pages with no form (privacy, terms) get two buttons, not three. */
.afs-bar--2 { grid-template-columns: repeat(2, 1fr); }

/* Slide away while the form is on screen. */
.afs-bar--hidden { transform: translateY(110%); }

@media (min-width: 901px) {
  .afs-bar { display: none; }
}

.afs-bar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  min-height: 64px;
  padding: .5rem .4rem;
  border: 0;
  background: #fff;
  font-family: var(--sans, 'Manrope', system-ui, sans-serif);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--navy, #0D1B2A);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s;
}
.afs-bar-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.afs-bar-btn span { line-height: 1.1; white-space: nowrap; }
.afs-bar-btn:active { background: #F2EFE8; }

/* Call — navy. The primary action for a serious buyer. */
.afs-bar-call {
  background: var(--navy, #0D1B2A);
  color: #fff;
}
.afs-bar-call:active { background: #12233A; }

/* WhatsApp — its own green. Recognisable in a tenth of a second,
   which is the whole point of using it. */
.afs-bar-wa {
  background: #25D366;
  color: #fff;
}
.afs-bar-wa:active { background: #1DA851; }

/* Enquire — gold. Ours. */
.afs-bar-enq {
  background: var(--gold, #C9A84C);
  color: var(--navy, #0D1B2A);
}
.afs-bar-enq:active { background: #B99738; }

/* Very narrow phones: shrink the label, never the tap target. */
@media (max-width: 340px) {
  .afs-bar-btn { font-size: .66rem; }
  .afs-bar-btn svg { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .afs-bar { transition: none; }
}