/*
 * Cribhunter contact-reveal gate styles.
 * Pairs with js/cribhunter-contact-gate.js — hides Houzez's tel:/mailto:/
 * wa.me links until the user taps "Show contact", at which point the JS
 * strips `.crib-contact-hidden` and the underlying links re-render.
 */

.crib-contact-hidden {
  display: none !important;
}

/*
 * Inline pill — placed next to/in-place-of the phone/email/whatsapp
 * row by the JS, NOT at the top of the contact card. Width:auto so it
 * hugs the label and matches Houzez's adjacent text-link style.
 */
.crib-show-contact-btn {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  background: var(--houzez-primary-color, #3554d1);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  transition: opacity 0.15s ease;
}

.crib-show-contact-btn:hover { opacity: 0.92; }
.crib-show-contact-btn:disabled { opacity: 0.7; cursor: progress; }

/* Inline phone-mask pill — sits in place of each phone-shaped run
 * inside the property description body. Tap on any pill in the same
 * container reveals all of them at once.
 *
 * Placed inline (not block) so it flows with the surrounding text —
 * the user sees the pill exactly where the number used to be. */
.crib-masked-phone {
  display: inline-block;
  padding: 1px 8px;
  margin: 0 2px;
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.3;
  color: #fff;
  background: var(--houzez-primary-color, #3554d1);
  border-radius: 4px;
  cursor: pointer;
  vertical-align: baseline;
  transition: opacity 0.15s ease;
  user-select: none;
}
.crib-masked-phone::after {
  content: " — tap to show";
  font-size: 0.78em;
  font-weight: 500;
  opacity: 0.95;
}
.crib-masked-phone:hover,
.crib-masked-phone:focus {
  opacity: 0.92;
  outline: none;
}
.crib-masked-phone-loading {
  opacity: 0.7;
  cursor: progress;
}