/**
 * The handful of shared components the [reb_broker_*] pages actually use,
 * lifted verbatim from directory.css so those pages no longer have to
 * load all ~2600 lines of /b/ directory + profile styling for four
 * classes. Only the CF7/review-form-specific selectors were dropped —
 * nothing on these pages renders CF7 markup.
 *
 * Values must stay in sync with directory.css: both files style the same
 * visual components, they just ship to different pages.
 */

/* ===== Page furniture, following the theme's own rules: square corners
   everywhere (the theme zeroes every --reb-radius token by explicit
   direction), hairline borders doing the separating, shadow only as a
   soft lift, gold uppercase tracked labels as the accent. ===== */
.reb-broker-card {
	background: var(--reb-surface);
	border: 1px solid var(--reb-border);
	box-shadow: 0 1px 2px rgba(20, 17, 15, 0.03), 0 8px 20px rgba(20, 17, 15, 0.04);
	padding: 44px 44px 40px;
}

@media (max-width: 560px) {
	.reb-broker-card {
		padding: 28px 20px 24px;
	}
}

.reb-broker-card-head {
	margin-bottom: 28px;
}

/* .reb-broker-form-wrap prefix is for specificity, not scoping: the
   theme's .reb-content-area h2 (24px) ties with a bare .class element
   selector and, printing after the plugin's CSS, would win. */
.reb-broker-form-wrap .reb-broker-card-head h2 {
	margin: 0;
	font-size: 26px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* Same mark as the theme's .reb-eyebrow — dot, uppercase, 0.18em. */
.reb-broker-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--reb-gold-deep);
}

/* REB logomark, masked so it takes the eyebrow's colour. Uses the
   plugin's own copy of the file — this stylesheet must not depend on a
   theme asset path. */
.reb-broker-eyebrow::before {
	content: "";
	width: 14px;
	height: 15px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("../img/mark.svg") center / contain no-repeat;
	mask: url("../img/mark.svg") center / contain no-repeat;
}

/* Hairline rule under the card head, stopping short — a quieter divider
   than a full-width border. */
.reb-broker-card-head::after {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin-top: 20px;
	background: var(--reb-gold);
}

/* ===== Buttons (shared scale, see directory.css for the rationale) ===== */
.reb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	line-height: 1;
	transition: background-position 0.45s ease, background-color 0.25s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}

.reb-btn-sm {
	padding: 11px 20px;
	font-size: 14px;
}

.reb-btn-gold {
	background-image: linear-gradient(325deg, var(--reb-brown) 0%, var(--reb-gold-light) 55%, var(--reb-gold) 90%);
	background-size: 280% auto;
	background-position: left top;
	color: #2a1e0c;
	box-shadow:
		0 0 20px rgba(184, 134, 60, 0.45),
		0 5px 14px -4px rgba(140, 100, 35, 0.35),
		inset 3px 3px 6px rgba(231, 201, 138, 0.45),
		inset -3px -3px 6px rgba(91, 74, 58, 0.3);
	transition: background-position 0.8s ease, box-shadow 0.4s ease;
}

.reb-btn-gold:hover {
	background-position: right top;
	box-shadow:
		0 0 28px rgba(184, 134, 60, 0.6),
		0 10px 20px -4px rgba(140, 100, 35, 0.4),
		inset 3px 3px 6px rgba(231, 201, 138, 0.55),
		inset -3px -3px 6px rgba(91, 74, 58, 0.35);
}

.reb-btn-gold:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 3px var(--reb-bg),
		0 0 0 6px var(--reb-gold);
}

@media (prefers-reduced-motion: reduce) {

	.reb-btn-gold {
		transition-duration: 0.01ms;
	}
}

.reb-btn-outline {
	background: var(--reb-surface);
	border-color: var(--reb-border);
	color: var(--reb-ink);
}

.reb-btn-outline:hover {
	border-color: var(--reb-gold);
	color: var(--reb-gold-deep);
}

/* ===== Floating label ===== */
.reb-field-float {
	position: relative;
	display: block;
	margin-bottom: 26px;
}

.reb-field-float input {
	position: relative;
	z-index: 1;
	padding-top: 14px;
}

/* top/line-height line the resting label up with the input's own text
   row: the input's content box starts at its 22px padding-top and is
   19px tall, so the label occupies exactly the same band and the two
   read as one line. It used to sit at 8px — floating 14px above where
   typing actually appears, which looked detached from the field.
   (Deliberate divergence from directory.css, which still pairs
   .reb-field-float with .reb-review-form-row's different padding.)

   z-index ABOVE the input (not below, as first written) — the floated
   label's box always overlaps the input's own top edge by a few px
   (translateY(-32px) doesn't clear it entirely), invisible against the
   input's normal `background: transparent` but painted straight over
   by the browser's own opaque autofill highlight once a field manager
   fills it — the box-shadow override in broker-account.css neutralises
   that highlight's COLOUR, but a same-or-lower-stacking label would
   still lose to *any* opaque paint under it, browser-forced or
   otherwise. Safe to sit on top: `pointer-events: none` below means the
   label was never in the click-to-focus path to begin with. */
.reb-field-float label,
.reb-field-float .reb-field-caption {
	position: absolute;
	left: 2px;
	top: 22px;
	z-index: 2;
	margin: 0;
	line-height: 19px;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--reb-muted);
	opacity: 0.75;
	pointer-events: none;
	transform-origin: left top;
	transition: transform 0.18s ease, color 0.18s ease, opacity 0.18s ease, font-size 0.18s ease, letter-spacing 0.18s ease;
}

.reb-field-float:has(input:focus) label,
.reb-field-float:has(input:not(:placeholder-shown)) label,
.reb-field-float:has(textarea:focus) label,
.reb-field-float:has(textarea:not(:placeholder-shown)) label,
.reb-field-float:has(input:focus) .reb-field-caption,
.reb-field-float:has(input:not(:placeholder-shown)) .reb-field-caption,
.reb-field-float:has(select) label,
.reb-field-float:has(select) .reb-field-caption,
.reb-field-float:has(input[type="date"]) label,
.reb-field-float:has(input[type="date"]) .reb-field-caption,
/* Browser autofill (username/password managers) doesn't reliably flip
   :placeholder-shown the same instant it fills a field — Chrome/Safari
   both expose their own :autofill/:-webkit-autofill state instead, so
   the label needs its own matcher on that rather than depending on
   :not(:placeholder-shown) to catch it too. Left un-floated, the label
   sits in its resting position — geometrically overlapping the input's
   own top edge, invisible against the input's normal `background:
   transparent` — which the browser's own opaque autofill highlight
   then paints straight through, the "text cut in half" look reported
   against a live autofilled field. */
.reb-field-float:has(input:autofill) label,
.reb-field-float:has(input:autofill) .reb-field-caption,
.reb-field-float:has(input:-webkit-autofill) label,
.reb-field-float:has(input:-webkit-autofill) .reb-field-caption {
	transform: translateY(-32px);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--reb-gold-deep);
	opacity: 1;
}

.reb-field-float::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 0;
	background: var(--reb-gold);
	transition: width 0.25s ease;
}

.reb-field-float:focus-within::after {
	width: 100%;
}

/* ===== Notices ===== */
.reb-review-notice {
	border-radius: 0;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.55;
	margin-bottom: 18px;
	border-left-width: 3px;
}

.reb-review-notice-success {
	background: #eaf6ee;
	border: 1px solid #cdeada;
	color: #2f6b4f;
}

.reb-review-notice-error {
	background: #fdecec;
	border: 1px solid #f5c6c6;
	color: #a13a3a;
}

/* ===== File inputs =====
   Styled through ::file-selector-button so no markup or JS changes are
   needed; the native control stays intact for keyboard and screen
   readers. */
input[type="file"] {
	font-family: inherit;
	font-size: 13px;
	color: var(--reb-muted);
	max-width: 100%;
}

input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 9px 16px;
	border: 1px solid var(--reb-border);
	border-radius: 999px;
	background: var(--reb-surface);
	color: var(--reb-ink);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

input[type="file"]::file-selector-button:hover {
	border-color: var(--reb-gold);
	color: var(--reb-gold-deep);
}

/* ===== Focus visibility ===== */
.reb-broker-form-wrap a:focus-visible,
.reb-broker-form-wrap button:focus-visible,
.reb-broker-form-wrap input:focus-visible,
.reb-broker-form-wrap select:focus-visible,
.reb-broker-form-wrap textarea:focus-visible,
.reb-broker-form-wrap [contenteditable]:focus-visible {
	outline: 2px solid var(--reb-gold);
	outline-offset: 2px;
}

/* ===== Honeypot ===== */
.reb-honeypot-field {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}