/* ===================================================================
   CTA BAR - SINGLE SOURCE OF TRUTH
   Owns every persistent bottom action bar on pages WITHOUT the tab nav:
     - property-detail / share page  ->  .cta-bar   (.cta-btn family)
     - add-property wizard           ->  .bottom-actions
   Loaded AFTER the page stylesheet so nothing can override it.

   Geometry (same pattern as bottom-nav.css): FIXED to bottom:0 - flush
   with the true viewport bottom on every browser. CONTENT-SIZED height:
   symmetric padding only, so the bar is exactly as tall as its buttons
   and the button stack is vertically centralized by construction. The
   scroll container reserves the bar's measured footprint via
   --cta-reserve (per-page JS ResizeObserver - property-detail.js on
   .cta-bar, add-property.js on .bottom-actions), so ANY bar height stays
   correct automatically.
   =================================================================== */

/* -- Shared bar shell ----------------------------------------------- */
.cta-bar,
.bottom-actions {
  position: fixed;
  /* bottom:0 - the one value every engine agrees on. No safe-area lift,
     no underlay strip: bar height == button stack height, outlines match. */
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: var(--white, #FFFFFF);
  border-top: 1px solid var(--border, #E4EAE8);
  box-sizing: border-box;
}

/* -- Property-detail / share: stacked rows -------------------------- */
.cta-bar {
  /* Symmetric padding: a little breathing room top & bottom, equal, so the
     rows sit dead-center in the bar and debug outlines coincide. */
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  z-index: 60;
}
.cta-row { display: flex; gap: 10px; }
.cta-btn {
  flex: 1;
  min-width: 0;                       /* flex-shrink instead of overflow */
  padding: 14px 12px;
  border-radius: var(--radius-md, 16px);
  font-size: 15px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
  letter-spacing: 0.1px;
}
.cta-btn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;            /* FR/large-font labels never wrap */
}
.cta-btn:active { opacity: 0.85; transform: scale(0.98); }
.cta-btn i { font-size: 18px; }

.cta-btn-primary  { background: var(--green-primary, #1A7A4C); color: #fff; }
.cta-btn-whatsapp { background: #25D366; color: #fff; }
.cta-btn-outline  {
  background: var(--cream, #FAFAF8);
  color: var(--ink-2, #2D3B38);
  border: 1.5px solid var(--border, #E4EAE8);
}

/* -- Add-property wizard: single row of pills ----------------------- */
.bottom-actions {
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 20;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}
.bottom-actions button span,
.bottom-actions button {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bottom-actions .btn-outline-pill { flex: 0 0 116px; }
.bottom-actions .btn-primary-pill { flex: 1; }

/* -- Short screens -------------------------------------------------- */
@media (max-height: 700px) {
  .cta-bar {
    padding: 8px 16px;                  /* symmetric, still centered */
    gap: 6px;
  }
  .cta-btn { padding: 10px 10px; font-size: 13.5px; border-radius: var(--radius-sm, 10px); }
  .cta-btn i { font-size: 16px; }
  .bottom-actions { padding-top: 8px; padding-bottom: 8px; }
}