/* The modal chrome itself (.bf-notify-modal / .bf-notify-box / .bf-notify-submit
   / .bf-notify-msg) is shared with the restock modal and lives in
   restock-notify.css — both stylesheets load on the same pages. Only the
   ID-scoped form rules have to be repeated here for our own field ids. */

/* ── Bell button next to the price ──────────────────────────────────────
   A square button, sized to the price line beside it. Width and height are
   fixed rather than derived from the icon so it can never resize once the
   SVG paints — .bf-price-row is above the fold and a late resize there
   would shift the layout (CLS). */
.bf-price-bell {
  flex: 0 0 auto;
  align-self: center;   /* .bf-price-wrap aligns on the baseline; a square box has none worth using */
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #e2e2e2;
  border-radius: 10px;
  background: #fff;
  color: #777;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.bf-price-bell svg { width: 20px; height: 20px; display: block; }
.bf-price-bell:hover { color: #ff2e7e; border-color: #ff2e7e; background: #fff0f6; }
.bf-price-bell:focus-visible { outline: 2px solid #ff2e7e; outline-offset: 2px; }
.bf-price-bell:disabled { opacity: .55; cursor: default; }
.bf-price-bell.is-set { color: #fff; background: #ff2e7e; border-color: #ff2e7e; }
.bf-price-bell.is-set svg { fill: rgba(255,255,255,.25); }

/* ── Secondary text entry point, under the CTA ─────────────────────────── */
.bf-price-alert-trigger {
  display: inline-flex;
  /* .bf-single-info is a column flex container, which blockifies its children
     (inline-flex becomes flex) and stretches them to full width — the dashed
     underline then ran the whole 438px of the column. align-self keeps the
     underline the width of the label. */
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin: -4px 0 16px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: #777;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dashed #ccc;
  line-height: 1.6;
}
.bf-price-alert-trigger:hover { color: #ff2e7e; border-bottom-color: #ff2e7e; }
.bf-price-alert-bell { font-size: 0.7em; }

/* Inside a fit card the trigger sits under that card's own CTA, so it needs
   to centre rather than hang off the left edge of the info column. */
.bf-fit-card .bf-price-alert-trigger { margin: 0 auto 4px; align-self: center; }

/* ── Modal: ask step ───────────────────────────────────────────────────── */
#bf-price-alert-form { flex-direction: column; gap: 10px; }
#bf-price-alert-form:not([hidden]) { display: flex; }
#bf-price-alert-email {
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
}
#bf-price-alert-email:focus { outline: none; border-color: #ff2e7e; }

/* The shared confirmation-step chrome (.bf-alert-tick / -receipt / -links
   / -link / -sep) moved to restock-notify.css: it is used by the price,
   restock and brand-follow modals, and brand pages load that file but not
   this one. */