/* Buying Buddy pop-ups (sign up, log in, save search, favorites) render into
   our page, not into the widgets' shadow DOM. Their stylesheet puts these styles
   in a cascade layer with !important, which only a layered !important rule can
   beat, so everything here lives in @layer zr-bb. Kept out of Tailwind, which
   does not allow custom layers. Shape system: 12px controls, 24px panels. */
@layer zr-bb {
  dialog.bfg-modal-wrap {
    border: 0 !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 80px -20px rgba(31, 22, 54, 0.45) !important;
  }
  dialog.bfg-modal-wrap .btn {
    border-radius: 12px !important;
    font-family: Poppins, system-ui, sans-serif !important;
    font-weight: 600 !important;
  }
  dialog.bfg-modal-wrap .btn-primary,
  dialog.bfg-modal-wrap .btn-green {
    background-color: #462b91 !important;
    border-color: #462b91 !important;
    color: #fff !important;
  }
  dialog.bfg-modal-wrap .btn-primary:hover,
  dialog.bfg-modal-wrap .btn-green:hover {
    background-color: #6d4ac7 !important;
    border-color: #6d4ac7 !important;
  }
  dialog.bfg-modal-wrap .btn-facebook,
  dialog.bfg-modal-wrap .btn-google-red {
    background-color: #fff !important;
    border: 1px solid rgba(70, 43, 145, 0.2) !important;
    color: #1f1636 !important;
  }
  dialog.bfg-modal-wrap .btn-facebook:hover,
  dialog.bfg-modal-wrap .btn-google-red:hover { background-color: #f1edfa !important; }
  dialog.bfg-modal-wrap .btn-facebook i,
  dialog.bfg-modal-wrap .btn-google-red i {
    color: #462b91 !important;
    border-color: rgba(70, 43, 145, 0.2) !important;
  }
  dialog.bfg-modal-wrap .bfg-fixed-green { color: #462b91 !important; }
  dialog.bfg-modal-wrap .bg-notch {
    background-color: #f6f4fb !important;
    border-radius: 16px !important;
  }

  /* A field and its icon box read as one control: one outline, square joints. */
  dialog.bfg-modal-wrap .form-control,
  dialog.bfg-modal-wrap select,
  dialog.bfg-modal-wrap textarea {
    border-color: rgba(70, 43, 145, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }
  dialog.bfg-modal-wrap .input-group-text {
    background-color: #fff !important;
    border-color: rgba(70, 43, 145, 0.2) !important;
    color: #462b91 !important;
  }
  dialog.bfg-modal-wrap .input-group-prepend > .input-group-text {
    border-radius: 12px 0 0 12px !important;
    border-right: 0 !important;
  }
  dialog.bfg-modal-wrap .input-group-prepend ~ .form-control,
  dialog.bfg-modal-wrap .input-group-prepend ~ * .form-control:not(.mbb-phone-country__search) {
    border-radius: 0 12px 12px 0 !important;
  }
  dialog.bfg-modal-wrap .mbb-phone-country__btn {
    border-radius: 0 !important;
    border-right: 0 !important;
  }
  dialog.bfg-modal-wrap .form-control:focus,
  dialog.bfg-modal-wrap select:focus,
  dialog.bfg-modal-wrap textarea:focus {
    border-color: rgba(70, 43, 145, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(70, 43, 145, 0.14) !important;
  }

  /* "Services provided by <agent>, Zeal Realty" -> the brokerage only. */
  .form-popup-footer .realtor { font-size: 0 !important; }
  .form-popup-footer .realtor::after {
    content: 'Services provided by Zeal Realty' !important;
    display: inline !important;
    font-size: 0.8125rem !important;
  }
}