/**
 * Visitor accounts: the heart, the header bar, and the My Account page.
 *
 * No colour is hardcoded; everything resolves to a design token.
 */

/* ----------------------------------------------------------------- heart */

.bbis.bbis .bbis-heart,
.bbis-heart {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: rgb(255 255 255 / 92%);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 1px 6px rgb(0 0 0 / 22%);
	transition: transform .16s ease, background .16s ease;
}

.bbis-heart:hover { transform: scale(1.08); background: #fff; }

.bbis-heart svg {
	width: 19px;
	height: 19px;
	/* Outline until saved, filled after — the state has to read at a glance on
	   a photo, where a colour change alone is easy to miss. */
	fill: none;
	/* The brand's lighter colour, which the tokens seed from the broker
	   options page. Outline when unsaved, filled when saved — the shape has to
	   carry the state, because on a photograph a colour change alone is easy to
	   miss. */
	stroke: var(--bbis-accent);
	stroke-width: 2;
	stroke-linejoin: round;
	transition: fill .16s ease, stroke .16s ease;
}

.bbis-heart.is-on svg {
	fill: var(--bbis-accent);
	stroke: var(--bbis-accent);
}

.bbis-heart.is-busy { opacity: .55; pointer-events: none; }

/* A brief pop on save, so the tap is acknowledged even on a slow connection. */
@keyframes bbis-heart-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.28); }
	100% { transform: scale(1); }
}

.bbis-heart.is-pop { animation: bbis-heart-pop .28s ease; }

@media (prefers-reduced-motion: reduce) {
	.bbis-heart,
	.bbis-heart svg { transition: none; }
	.bbis-heart.is-pop { animation: none; }
}

/* The detail page heart sits in the button row, not over a photo. */
.bbis.bbis .bbis-lp__actions .bbis-heart {
	position: static;
	width: auto;
	height: auto;
	gap: 8px;
	padding: 11px 18px;
	background: transparent;
	border: 1px solid var(--bbis-border);
	border-radius: var(--bbis-radius);
	box-shadow: none;
	color: var(--bbis-ink);
	font-family: var(--bbis-font-body);
	font-size: .92rem;
	font-weight: 600;
}

.bbis.bbis .bbis-lp__actions .bbis-heart:hover {
	transform: none;
	border-color: var(--bbis-ink);
}

/* ------------------------------------------------------------ header bar */

.bbis.bbis.bbis-acct-bar {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--bbis-font-body);
}

/* Saved properties is a different kind of thing from Sign in and Sign up — it
   is where your own stuff lives, not a call to action. Pushing it to the far
   right and giving it a divider says so without a label explaining it. */
.bbis.bbis .bbis-acct-bar__faves {
	order: 99;
	margin-left: 10px;
	padding-left: 18px;
	border-left: 1px solid currentColor;
	border-left-color: color-mix(in srgb, currentColor 28%, transparent);
}

.bbis.bbis .bbis-acct-bar__faves {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: currentColor;
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.bbis.bbis .bbis-acct-bar__faves:hover { text-decoration: underline; }

.bbis.bbis .bbis-acct-bar__count {
	display: inline-block;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	background: var(--bbis-accent);
	color: var(--bbis-accent-fg);
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
}

.bbis.bbis .bbis-acct-bar__count[hidden] { display: none; }

.bbis.bbis .bbis-acct-bar__link,
.bbis.bbis .bbis-acct-bar__cta {
	text-decoration: none;
	white-space: nowrap;
}

/* Plain text with a hairline rule to its left, rather than a second button.

   Two filled buttons side by side make the visitor choose between two things
   that look equally important. Signing up is the one worth pushing; signing in
   is for people who already know they have an account and will find it. The
   rule separates the pair from whatever the header puts before them.

   currentColor throughout, so this works on a dark header or a light one
   without the module needing to know which it is sitting on. */
.bbis.bbis .bbis-acct-bar__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 9px 6px 9px 28px;
	background: none;
	border-radius: 0;
	color: currentColor;
	font-size: 1rem;
	font-weight: 500;
	opacity: .92;
	transition: opacity .15s ease;
}

.bbis.bbis .bbis-acct-bar__link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 34px;
	background: currentColor;
	opacity: .38;
	transform: translateY(-50%);
}

.bbis.bbis .bbis-acct-bar__link:hover { background: none; opacity: 1; }

.bbis.bbis .bbis-acct-bar__cta {
	display: inline-flex;
	align-items: center;
	padding: 13px 26px;
	background: var(--bbis-accent);
	color: var(--bbis-accent-fg);
	border-radius: 10px;
	font-size: .88rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	transition: background .15s ease;
}

.bbis.bbis .bbis-acct-bar__cta:hover { background: var(--bbis-accent-hi); }

.bbis.bbis .bbis-acct-bar__link:focus-visible,
.bbis.bbis .bbis-acct-bar__cta:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.bbis.bbis .bbis-acct-bar__me { position: relative; }

.bbis.bbis .bbis-acct-bar__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 4px;
	background: none;
	border: 0;
	color: currentColor;
	font-family: var(--bbis-font-body);
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
}

.bbis.bbis .bbis-acct-bar__chev {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	transition: transform .18s ease;
}

.bbis.bbis .bbis-acct-bar__btn[aria-expanded="true"] .bbis-acct-bar__chev { transform: rotate(180deg); }

.bbis.bbis .bbis-acct-bar__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 900;
	min-width: 196px;
	padding: 6px;
	background: var(--bbis-surface);
	border: 1px solid var(--bbis-border);
	border-radius: var(--bbis-radius);
	box-shadow: 0 14px 34px rgb(0 0 0 / 16%);
}

.bbis.bbis .bbis-acct-bar__menu[hidden] { display: none; }

.bbis.bbis .bbis-acct-bar__menu a {
	display: block;
	padding: 9px 12px;
	border-radius: calc(var(--bbis-radius) / 2);
	color: var(--bbis-ink);
	font-size: .9rem;
	text-decoration: none;
}

.bbis.bbis .bbis-acct-bar__menu a:hover { background: var(--bbis-border); }

/* --------------------------------------------------------- account page */

.bbis.bbis.bbis-acct {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(40px, 6vw, 88px) max(18px, 2%) clamp(56px, 7vw, 96px);
	font-family: var(--bbis-font-body);
}

/* Blueprint grid behind the card.

   Drawn on a pseudo-element rather than the wrapper's own background so the
   radial mask fades the grid out toward the edges without touching the card
   sitting on top of it. Ruled in --bbis-border, so it picks up the site's own
   palette and stays a texture rather than a pattern competing with the form.

   Masking is what makes it subtle: a grid that runs edge to edge reads as a
   background image someone forgot to remove. One that dissolves outward reads
   as depth. */
.bbis.bbis.bbis-acct::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, var(--bbis-border) 1px, transparent 1px),
		linear-gradient(to bottom, var(--bbis-border) 1px, transparent 1px);
	background-size: 46px 46px;
	background-position: center;
	opacity: .5;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 25%, transparent 76%);
	        mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 25%, transparent 76%);
}

/* Above the grid, and opaque, so the ruling stops at the card edge. */
.bbis.bbis .bbis-acct__card {
	position: relative;
	z-index: 1;
	max-width: 470px;
	margin: 0 auto;
	padding: 36px;
	background: var(--bbis-surface);
	border: 1px solid var(--bbis-border);
	border-radius: var(--bbis-radius);
	box-shadow: 0 18px 48px rgb(0 0 0 / 7%);
}

/* The brand edge. Sits over the border rather than replacing it, so the card
   keeps its shape when --bbis-radius is 0. */
.bbis.bbis .bbis-acct__card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	height: 3px;
	border-radius: var(--bbis-radius) var(--bbis-radius) 0 0;
	background: linear-gradient(90deg,
		var(--bbis-primary) 0%,
		var(--bbis-accent) 55%,
		var(--bbis-primary) 100%);
}

.bbis.bbis .bbis-acct__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}

.bbis.bbis .bbis-acct__h {
	margin: 0 0 6px;
	font-family: var(--bbis-font-head);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 700;
}

.bbis.bbis .bbis-acct__sub {
	margin: 0 0 24px;
	color: var(--bbis-muted);
	font-size: .95rem;
	line-height: 1.5;
}

.bbis.bbis .bbis-acct__signout {
	color: var(--bbis-muted);
	font-size: .9rem;
	text-decoration: underline;
}

.bbis.bbis .bbis-acct__tabs {
	display: flex;
	gap: 26px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--bbis-border);
}

.bbis.bbis .bbis-acct__tab {
	padding: 0 0 12px;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	color: var(--bbis-muted);
	font-family: var(--bbis-font-body);
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}

.bbis.bbis .bbis-acct__tab.is-on {
	color: var(--bbis-ink);
	border-bottom-color: var(--bbis-accent);
}

.bbis.bbis .bbis-acct__pane { display: none; }
.bbis.bbis .bbis-acct__pane.is-on { display: block; }

.bbis.bbis .bbis-acct__form { display: flex; flex-direction: column; gap: 16px; }

.bbis.bbis .bbis-acct__form label {
	display: block;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bbis-muted);
}

/* Deliberately identical to the login module's fields.

   The sign-in tab is rendered by this module and the create-account tab by the
   login module, so the two sat side by side on one page with different padding,
   type sizes, corner radii and backgrounds — the same email box drawn two ways
   depending on which tab you were on. The 16px size is not arbitrary either:
   anything smaller makes iOS zoom the page when the field takes focus, which on
   the old .97rem meant the signup form jumped as soon as you tapped it. */
.bbis.bbis .bbis-acct__form input {
	display: block;
	width: 100%;
	margin-top: 7px;
	padding: 13px 14px;
	background: var(--bbis-surface);
	border: 1px solid var(--bbis-border);
	border-radius: var(--bbis-radius);
	color: var(--bbis-ink);
	font-family: var(--bbis-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	box-sizing: border-box;
}

.bbis.bbis .bbis-acct__form input:focus {
	outline: 0;
	border-color: var(--bbis-accent);
	box-shadow: 0 0 0 3px var(--bbis-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bbis-accent) 28%, transparent);
}

.bbis.bbis .bbis-acct__btn {
	width: 100%;
	padding: 14px 20px;
	background: var(--bbis-accent);
	color: var(--bbis-accent-fg);
	border: 0;
	border-radius: calc(var(--bbis-radius) / 2);
	font-family: var(--bbis-font-body);
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}

.bbis.bbis .bbis-acct__btn:hover { background: var(--bbis-accent-hi); }

.bbis.bbis .bbis-acct__hint {
	margin: 0;
	color: var(--bbis-muted);
	font-size: .84rem;
	line-height: 1.45;
	text-align: center;
}

.bbis.bbis .bbis-acct__empty {
	padding: 56px 20px;
	margin: 0;
	color: var(--bbis-muted);
	text-align: center;
	font-size: 1rem;
}

.bbis.bbis .bbis-acct__searches {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bbis.bbis .bbis-acct__searches li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid var(--bbis-border);
}

.bbis.bbis .bbis-acct__searches a {
	color: var(--bbis-ink);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.bbis.bbis .bbis-acct__searches a:hover { text-decoration: underline; }
.bbis.bbis .bbis-acct__searches span { color: var(--bbis-muted); font-size: .84rem; }

.bbis.bbis .bbis-acct__gone {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid var(--bbis-border);
	color: var(--bbis-muted);
}

.bbis.bbis .bbis-acct__gone em { font-style: normal; font-size: .84rem; }

.bbis.bbis .bbis-acct__notice {
	max-width: 470px;
	margin: 0 auto 20px;
	padding: 13px 16px;
	border-radius: calc(var(--bbis-radius) / 2);
	font-size: .92rem;
	line-height: 1.45;
}

.bbis.bbis .bbis-acct__notice--ok {
	background: rgb(22 122 63 / 9%);
	border: 1px solid rgb(22 122 63 / 32%);
	color: #10502a;
}

.bbis.bbis .bbis-acct__notice--bad {
	background: rgb(170 40 40 / 8%);
	border: 1px solid rgb(170 40 40 / 30%);
	color: #8a2020;
}

/* ------------------------------------------------------- save-it prompt */

.bbis-acct-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	z-index: 100001;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: min(460px, calc(100vw - 32px));
	padding: 14px 18px;
	transform: translateX(-50%) translateY(12px);
	background: var(--bbis-ink, #111);
	color: #fff;
	border-radius: 10px;
	box-shadow: 0 16px 44px rgb(0 0 0 / 34%);
	font-family: var(--bbis-font-body);
	font-size: .92rem;
	line-height: 1.4;
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
}

.bbis-acct-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

.bbis-acct-toast a {
	flex: 0 0 auto;
	padding: 8px 14px;
	background: var(--bbis-accent, #9b7523);
	color: var(--bbis-accent-fg, #111);
	border-radius: 6px;
	font-size: .84rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.bbis-acct-toast { transition: none; }
}

/* The heart with a caption, in the listing page's button row. It has to read as
   a sibling of "Request info" and "Schedule showing", not as an icon that
   wandered in — so it takes their shape and only the heart carries the state. */
.bbis.bbis .bbis-heart--named {
	/* Undo the card heart's geometry. The base rule pins a 34px circle to the
	   photo's corner; inherited here it squeezed the heart and the caption to
	   zero width, and the button rendered as an empty white disc. */
	position: static;
	width: auto;
	height: auto;
	min-height: 40px;
	gap: 9px;
	padding: 9px 18px;
	border: 1px solid var(--bbis-border);
	border-radius: 999px;
	box-shadow: none;
	color: var(--bbis-ink);
}

.bbis.bbis .bbis-heart--named:hover { transform: none; border-color: var(--bbis-accent); }

.bbis.bbis .bbis-lp__actions .bbis-heart--named {
	width: 100%;
	justify-content: center;
	min-height: 48px;
}

.bbis.bbis .bbis-heart__t {
	color: var(--bbis-ink);
	font-family: var(--bbis-font-body);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}