/**
 * Front-end Broker login/register/password-reset/account pages
 * ([reb_broker_*] shortcodes in plain WP Pages). Loads after
 * broker-base.css, which carries the shared .reb-btn/.reb-field-float/
 * .reb-review-notice components; the --reb-* tokens both files read are
 * declared here on .reb-broker-form-wrap, since directory.css scopes its
 * own copies to .reb-directory/.reb-profile, which never wrap these pages.
 */
.reb-broker-form-wrap {
	--reb-bg: #faf8f4;
	--reb-surface: #ffffff;
	--reb-border: #e9e2d4;
	--reb-ink: #221d18;
	--reb-muted: #766e62;
	--reb-gold: #b8863c;
	--reb-gold-deep: #8c6423;
	--reb-gold-light: #e7c98a;
	--reb-error: #d9662c;
	--reb-brown: #5b4a3a;
	--reb-brown-deep: #2f2018;

	max-width: 640px;
	margin: 0 auto;
	padding: 48px 0;
	color: var(--reb-ink);
}

.reb-broker-form-wrap h2 {
	margin: 0 0 8px;
}

/* .reb-field-float/.reb-field-caption (directory.css) only ever handle
   the label's OWN positioning/animation — every actual INPUT style
   (width, the flat underline border, padding, focus color) lives on a
   SEPARATE, always-paired class the review form uses alongside it
   (.reb-review-form-row) or CF7's own .wpcf7-form-control. .reb-field-float
   was never meant to be used alone; this page's forms only ever add that
   one class, so previously the input fell back to the browser's boxy
   default entirely (confirmed directly on the live site: a plain bordered
   box ~147px wide in a 280px container, its label sitting on top of the
   border instead of floated clear above it — .reb-field-float's own
   `padding-top: 14px` alone doesn't reserve enough room without the
   paired class's padding/border also present).
   Rather than borrow .reb-review-form-row here (a class that semantically
   belongs to the review form, coupling this page to it in a way that
   could silently drift apart later), broker-account.css declares the
   full input treatment itself — same underline aesthetic, values copied
   from .reb-review-form-row input for visual consistency, but owned by
   this file so every [reb_broker_*] form is fully self-sufficient. */
.reb-broker-form-wrap .reb-field-float input,
.reb-broker-form-wrap .reb-field-float select,
.reb-broker-form-wrap .reb-field-float textarea {
	display: block;
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--reb-border);
	border-radius: 0;
	padding: 8px 2px 10px;
	padding-top: 22px;
	font-size: 15px;
	font-family: inherit;
	color: var(--reb-ink);
	background: transparent;
	transition: border-color 0.2s ease;
}

.reb-broker-form-wrap .reb-field-float input:focus,
.reb-broker-form-wrap .reb-field-float select:focus,
.reb-broker-form-wrap .reb-field-float textarea:focus {
	outline: none;
	border-bottom-color: var(--reb-gold);
}

/* Chrome/Safari paint autofilled fields with their own opaque highlight
   (pale blue/yellow) that `background: transparent` above can't touch —
   it isn't a real `background`, and even `background: transparent
   !important` has no effect on it. The only override surface is an
   inset box-shadow wide enough to fully cover the input, which is what
   the huge 1000px spread below does. `-webkit-text-fill-color` is
   needed too: autofill also force-recolours the TEXT, ignoring the
   input's own `color`. The 9999s transition delay stops the browser's
   highlight from flashing for a frame before this rule takes over —
   standard trick, not an actual animation. Together this makes an
   autofilled field render identically to a manually-typed one, so the
   :has(input:autofill) label-floating fix (broker-base.css) has a
   plain transparent field to float correctly over. */
.reb-broker-form-wrap .reb-field-float input:autofill,
.reb-broker-form-wrap .reb-field-float input:-webkit-autofill,
.reb-broker-form-wrap .reb-field-float input:-webkit-autofill:hover,
.reb-broker-form-wrap .reb-field-float input:-webkit-autofill:focus,
.reb-broker-form-wrap .reb-field-float input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--reb-ink);
	-webkit-box-shadow: 0 0 0 1000px var(--reb-surface) inset;
	box-shadow: 0 0 0 1000px var(--reb-surface) inset;
	transition: background-color 9999s ease-in-out 0s, border-color 0.2s ease;
}

/* A default `appearance: auto` <select> is drawn by the platform, which
   adds its own inner text indent and its own intrinsic height — so a
   select sat ~2px taller than the <input> beside it and started its text
   further right, visible as a crooked row wherever the two share a
   .reb-broker-account-row (Chức danh next to Công ty, the two
   career-start pickers). Normalised to the same box as the inputs.
   appearance:none drops the native arrow, so it's redrawn below as a
   background chevron.
   Each of the 3 select contexts needs its own rule rather than one
   blanket `select`: they sit on different backgrounds (transparent vs
   the repeater row's surface) and different padding, and each base rule
   sets `background` as a SHORTHAND — which resets background-image to
   none, so a lower-specificity rule here would silently lose the
   chevron. Same specificity + later in the file wins cleanly. */
.reb-broker-form-wrap {
	--reb-select-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23766e62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* `line-height` explicit on all 3 rules below, not left to inherit —
   with appearance:none, Chromium/WebKit still lay out a <select>'s
   selected-option text in an internal box that doesn't reliably honour
   the surrounding padding the way a plain line-height does. Too tight a
   value (or none at all, inheriting the tighter body line-height) let
   descenders on Vietnamese letters — g, ph, y with a dấu — get clipped
   at the bottom edge despite the box itself having room. 1.4 is
   generous enough to clear them without visibly changing the field's
   height (still governed by the shared padding-top/bottom above). */
.reb-broker-form-wrap .reb-field-float select,
.reb-broker-form-wrap .reb-broker-account-field select {
	appearance: none;
	-webkit-appearance: none;
	line-height: 1.4;
	background-color: transparent;
	background-image: var(--reb-select-chevron);
	background-repeat: no-repeat;
	background-position: right 2px center;
	background-size: 16px 16px;
	padding-right: 24px;
}

.reb-broker-form-wrap .reb-broker-repeater-row select {
	appearance: none;
	-webkit-appearance: none;
	line-height: 1.4;
	background-color: var(--reb-surface);
	background-image: var(--reb-select-chevron);
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 16px 16px;
	padding-right: 30px;
}

/* cert_no once verified, hubspot_account_email once matched — reads as
   locked rather than just an ordinary empty-looking field, so it isn't
   mistaken for a bug. No focus-glow override needed: `readonly` inputs
   don't reject focus, but there's nothing useful to type into it. */
.reb-broker-form-wrap .reb-field-float input[readonly] {
	color: var(--reb-muted);
	cursor: default;
}

/* This page's content is rendered inside the theme's .reb-prose (see
   page.php), whose own `.reb-prose a { color: gold; text-decoration:
   underline; }` (specificity 0,1,1) outranks the shared .reb-btn
   (0,1,0) from directory.css — any <a class="reb-btn"> in here (e.g.
   "Đăng xuất") rendered as a plain underlined gold link instead of the
   pill button every other .reb-btn on the site gets. Scoped override,
   same "self-declare what THIS page specifically needs" principle as
   the .reb-field-float fix above — .reb-prose itself is left untouched
   since its underlined-link treatment is correct for actual body copy. */
.reb-broker-form-wrap a.reb-btn {
	text-decoration: none;
	color: var(--reb-ink);
}

.reb-broker-form-wrap a.reb-btn-outline:hover {
	color: var(--reb-gold-deep);
}

.reb-broker-form-hint {
	color: var(--reb-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 24px;
}

/* Auth pages are a single centred card; the account page is a full
   working surface and opts out via .reb-broker-account below. */
.reb-broker-form-wrap--auth {
	max-width: 560px;
}

/* Registration asks for a lot more than login does — two-column rows
   need the extra room. */
.reb-broker-form-wrap--wide {
	max-width: 720px;
}

/* Full-width primary action reads as the obvious next step and gives a
   comfortable tap target on mobile. */
.reb-broker-form-wrap--auth .reb-broker-form > .reb-btn-gold {
	width: 100%;
	margin-top: 4px;
}

.reb-broker-card-foot {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--reb-border);
	font-size: 14px;
	color: var(--reb-muted);
}

.reb-broker-card-foot a {
	color: var(--reb-gold-deep);
	font-weight: 600;
}

.reb-broker-card-foot .reb-broker-form-links {
	margin: 0;
}

.reb-broker-form-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	margin: 4px 0 20px;
}

.reb-broker-form-checkbox input {
	margin-top: 3px;
}

.reb-broker-form-links {
	margin-top: 16px;
	font-size: 14px;
}

.reb-broker-form-links a {
	color: var(--reb-gold-deep);
}

/* Show/hide password control (assets/js/broker-auth.js). */
.reb-field-float--has-toggle {
	position: relative;
}

/* Needs the .reb-broker-form-wrap prefix to outrank this file's own
   .reb-broker-form-wrap .reb-field-float input padding shorthand. */
.reb-broker-form-wrap .reb-field-float--has-toggle input {
	padding-right: 52px;
}

.reb-password-toggle {
	position: absolute;
	right: 0;
	bottom: 10px;
	z-index: 2;
	border: none;
	background: transparent;
	color: var(--reb-muted);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 2px;
}

.reb-password-toggle:hover {
	color: var(--reb-gold-deep);
}

/* Registration form's "Đã có chứng chỉ / Đã có tài khoản HubSpot"
   toggles. Real checkbox kept (visually hidden, not display:none) so it
   stays focusable/keyboard-operable and its :checked state still drives
   the styled track+thumb via a plain sibling selector — no JS involved
   in the switch itself. */
.reb-pill-switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	color: var(--reb-ink);
	user-select: none;
}

.reb-pill-switch-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.reb-pill-switch-track {
	position: relative;
	flex: none;
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: var(--reb-border);
	transition: background-color 0.2s ease;
}

.reb-pill-switch-track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease;
}

.reb-pill-switch-input:checked ~ .reb-pill-switch-track {
	background: var(--reb-gold);
}

.reb-pill-switch-input:checked ~ .reb-pill-switch-track::after {
	transform: translateX(18px);
}

.reb-pill-switch-input:focus-visible ~ .reb-pill-switch-track {
	outline: 2px solid var(--reb-gold);
	outline-offset: 2px;
}

.reb-broker-toggle-group {
	margin: 4px 0 20px;
}

/* Revealed fields are always present in the form (so they still submit
   if a broker fills them in then flips the switch back off — Registration
   ::handle() decides whether to actually save them based on the checkbox
   state, not just presence) — hidden purely via :has(), no JS needed to
   show/hide on toggle. */
.reb-broker-toggle-reveal {
	display: none;
	margin-top: 16px;
	padding-left: 50px;
}

.reb-broker-toggle-group:has(.reb-pill-switch-input:checked) .reb-broker-toggle-reveal {
	display: block;
}

@media (max-width: 480px) {
	.reb-broker-toggle-reveal {
		padding-left: 0;
	}
}

/* Account page — wider, form organized into labeled sections. Widened
   from the old 960px single column to make room for the sidebar
   (.reb-broker-account-layout below) alongside a content column that's
   still roughly the same width fields were comfortable at before. */
.reb-broker-account {
	max-width: 1140px;
}

/* Sidebar + content, side by side above 900px (matches the breakpoint
   .reb-profile-layout already uses for the same "2 columns down to 1"
   move on the public profile page), stacked below it — sidebar first,
   full width, content beneath. */
.reb-broker-account-layout {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

@media (max-width: 900px) {
	.reb-broker-account-layout {
		flex-direction: column;
		/* Must override the flex-start above once this is a COLUMN: in a
		   column flex container `align-items` sizes the cross axis
		   (width), and flex-start means "shrink to content". The
		   horizontal tab strips inside are max-content-wide (nowrap
		   tabs), so the content column grew to ~860px at a 375px
		   viewport and pushed the whole page into a horizontal scroll.
		   Stretch keeps every child at the container's own width, which
		   is what lets the strips' own overflow-x actually engage. */
		align-items: stretch;
	}
}

.reb-broker-account-sidebar {
	flex: none;
	width: 240px;
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media (max-width: 900px) {
	.reb-broker-account-sidebar {
		width: 100%;
		position: static;
	}
}

.reb-broker-account-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

@media (max-width: 900px) {
	/* A vertical stack of nav items only makes sense with a tall,
	   narrow sidebar — once it's a full-width strip above the content,
	   a horizontal scroller reads far more like the tab bar it actually
	   behaves as with JS on. */
	.reb-broker-account-nav {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 4px;
		overflow-x: auto;
		/* Same reason as .reb-broker-portfolio-nav's own overflow-y:
		   once overflow-x leaves `visible` the spec computes the other
		   axis as `auto` too, which showed a stray vertical scrollbar
		   on a strip that never overflows vertically. */
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}

	/* Stacked, the sidebar's mini profile card + Đăng xuất would land
	   BETWEEN the tab strip and the panel that strip controls, which
	   reads as though the card belongs to the active tab. Moving it
	   above the tabs keeps tabs and their content adjacent — `order`
	   on the sidebar's own flex column, no DOM change needed. Its
	   divider flips sides to match: as the first thing on the page the
	   original border-top drew a rule with nothing above it. */
	.reb-broker-account-sidebar-footer {
		order: -1;
		padding-top: 0;
		padding-bottom: 20px;
		border-top: none;
		border-bottom: 1px solid var(--reb-border);
	}
}

/* Specificity has to beat the theme's .reb-prose a (0,1,1) — same fix
   shape as .reb-broker-account-jumpbar-nav a used before it (see that
   rule's own history) and every other bare <a> on this page. */
.reb-broker-form-wrap .reb-broker-account-nav a {
	display: block;
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--reb-ink);
	text-decoration: none;
	border-left: 2px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.reb-broker-form-wrap .reb-broker-account-nav a:hover {
	background: var(--reb-bg);
}

.reb-broker-form-wrap .reb-broker-account-nav a.is-active {
	background: var(--reb-bg);
	color: var(--reb-gold-deep);
	border-color: var(--reb-gold);
}

@media (max-width: 900px) {
	.reb-broker-form-wrap .reb-broker-account-nav a {
		flex: none;
		white-space: nowrap;
		border-left: none;
		border-bottom: 2px solid transparent;
	}
}

.reb-broker-account-sidebar-footer {
	padding-top: 20px;
	border-top: 1px solid var(--reb-border);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* The "1 card nhỏ" — avatar left, name/chức danh/công ty right. Reuses
   the same avatar file every other preview on this page shows, so it's
   never a second, separately-uploaded image. */
.reb-broker-mini-profile {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.reb-broker-mini-profile-avatar {
	flex: none;
	width: 44px;
	height: 44px;
	object-fit: cover;
	background: var(--reb-surface);
	border: 1px solid var(--reb-border);
}

/* Same `.reb-prose img` (0,1,1) specificity fight already documented
   above for the dropzone previews — beats a bare class here too and
   resets both margin and border-radius, flattening the circle. */
.reb-broker-form-wrap .reb-broker-mini-profile-avatar {
	margin: 0;
	border-radius: 50%;
}

.reb-broker-mini-profile-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.35;
}

.reb-broker-mini-profile-text strong {
	font-size: 13.5px;
	color: var(--reb-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.reb-broker-mini-profile-text span {
	font-size: 12px;
	color: var(--reb-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.reb-broker-form-wrap .reb-broker-account-nav-logout {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* Lines up with the nav links' own 14px text indent (their
	   `padding: 10px 14px`) instead of sitting flush against the
	   sidebar edge like an unrelated control. */
	padding-left: 14px;
	/* Own divider from the mini profile card above it, on top of the
	   footer's border-top that already separates the whole footer
	   block from the nav — the mini profile and Đăng xuất read as two
	   distinct things, not one group. */
	padding-top: 14px;
	border-top: 1px solid var(--reb-border);
	font-size: 13px;
	font-weight: 600;
	color: var(--reb-error);
	text-decoration: none;
}

.reb-broker-form-wrap .reb-broker-account-nav-logout svg {
	flex: none;
	width: 15px;
	height: 15px;
}

.reb-broker-form-wrap .reb-broker-account-nav-logout:hover {
	text-decoration: underline;
}

.reb-broker-account-content {
	flex: 1;
	min-width: 0;
}

/* Horizontal sub-tabs splitting "Hồ sơ năng lực" into its 4 pieces —
   deliberately a different shape from .reb-broker-account-nav's
   vertical sidebar list (this one lives inside the content column, not
   another sidebar), an underlined tab strip instead. overflow-x:auto
   from the start rather than a breakpoint swap, since it's already the
   "horizontal on narrow screens" layout the sidebar nav switches TO. */
/* Both horizontal tab strips scroll but hide their scrollbar: a desktop
   scrollbar track sitting under a tab row read as a stray grey rule
   (and on the sidebar strip it doubled up with the tabs' own underline).
   The partially-cut tab at the edge is the affordance that there's more,
   and broker-account.js scrolls the active one into view. */
.reb-broker-account-nav,
.reb-broker-portfolio-nav {
	scrollbar-width: none;
}

.reb-broker-account-nav::-webkit-scrollbar,
.reb-broker-portfolio-nav::-webkit-scrollbar {
	display: none;
}

.reb-broker-portfolio-nav {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	/* Without this, the spec computes overflow-y as `auto` too whenever
	   overflow-x isn't `visible` (the 2 axes can't disagree) — a stray
	   vertical scrollbar showed up here from that alone, no actual
	   vertical overflow needed to trigger it. */
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	border-bottom: 1px solid var(--reb-border);
	margin-bottom: 32px;
}

.reb-broker-form-wrap .reb-broker-portfolio-nav a {
	display: block;
	flex: none;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--reb-muted);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.reb-broker-form-wrap .reb-broker-portfolio-nav a:hover {
	color: var(--reb-ink);
}

.reb-broker-form-wrap .reb-broker-portfolio-nav a.is-active {
	color: var(--reb-gold-deep);
	border-color: var(--reb-gold);
}

/* A section an admin can't act on yet (CCCD) — quieter than a real
   section so it reads as "not here yet", not "broken/empty". */
.reb-broker-account-section--soon {
	opacity: 0.7;
}

.reb-broker-account-section--soon .reb-broker-field-hint {
	font-style: italic;
}

/* Anchor targets for the sidebar nav — offset for the theme's own fixed
   .reb-header (72px tall). Matches the exact 88px (72px header + 16px
   breathing room) the theme itself already uses for its own in-page
   anchors (#dang-ky etc. in style.css), so a jump here lands with the
   same visual clearance as everywhere else on the site. Only matters
   without JS — with JS, initAccountTabs() switches panels by toggling
   `hidden` and never triggers a real anchor jump (nor any scroll of its
   own — see that function's history for why a deliberate scroll call
   was removed). */
#section-basic,
#section-verification,
#section-portfolio,
#section-reviews,
#section-hubspot,
#section-password,
#portfolio-intro,
#portfolio-experience,
#portfolio-expertise {
	scroll-margin-top: 88px;
}

/* Save button, end of the profile-save <form> — NOT fixed (per
   explicit feedback: the pinned bottom bar covered content and felt
   heavy). A real sibling of the 3 panels (basic/verification/portfolio)
   rather than inside any one of them, so it sits right after whichever
   of those 3 the sidebar currently shows instead of only ever appearing
   under "Hồ sơ năng lực" itself. broker-account.js's initAccountTabs()
   also hides it outright on Đánh giá/Liên kết HubSpot/Đổi mật khẩu
   (`[hidden]` via `data-save-for`) — those 3 panels either have nothing
   this button could save or already have their own. */
.reb-broker-account-savebar {
	display: flex;
	justify-content: flex-end;
	padding: 16px 0;
	border-top: 1px solid var(--reb-border);
	margin-top: 32px;
}

/* Without this, the plain `display: flex` above (a real author rule)
   outranks the browser's own `[hidden] { display: none }` UA default
   (the lowest-priority rule there is) — the element would keep
   rendering as a flex box, `hidden` attribute or not. */
.reb-broker-account-savebar[hidden] {
	display: none;
}

@media (max-width: 640px) {
	.reb-broker-account-savebar {
		justify-content: center;
	}
}

.reb-broker-account-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--reb-border);
}

.reb-broker-account-head .reb-broker-eyebrow {
	margin-bottom: 8px;
}

.reb-broker-form-wrap .reb-broker-account-head h2 {
	font-size: 26px;
	letter-spacing: -0.01em;
}

.reb-broker-account-head-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.reb-broker-account-head h2 {
	margin: 0;
}

/* No divider border — with .reb-field-float/repeater rows already using
   the same 1px var(--reb-border) as their own underline, a border-top
   here at the exact same weight/color reads as one more stray input
   underline instead of a section break. Spacing alone (margin) separates
   sections instead. */
/* Scales with the viewport for the same reason the page's own top
   padding does (which deliberately matches this value) — a flat 80px
   between sections is most of a phone screen spent on empty space. */
.reb-broker-account-section {
	margin: clamp(32px, 7vw, 80px) 0;
}

.reb-broker-account-section:first-of-type {
	margin-top: 0;
}

/* Every one of the 4 "Hồ sơ năng lực" sub-tab sections directly follows
   the visible .reb-broker-portfolio-nav (only one section shows at a
   time), but `:first-of-type` above only zeroes that gap for the
   literal first one in DOM order (Giới thiệu) — the other 3 kept their
   full inter-section margin-top, which collapsed with the nav's own
   32px margin-bottom into a visibly bigger gap than Giới thiệu's. The
   nav's margin-bottom is the only spacing needed here for any of them. */
[data-subpanel] {
	margin-top: 0;
}

/* Numbered chapter marker, the theme's own .reb-section-head language
   (big gold numeral beside the heading) at form scale — the full 240px
   marker column the theme uses would waste half the field width here. */
.reb-broker-section-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 32px;
}

.reb-broker-section-number {
	flex: none;
	font-weight: 800;
	font-size: 30px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--reb-gold);
}

/* Prefixed with .reb-broker-form-wrap purely for specificity: the
   theme's .reb-content-area h3/h4 rules tie with a bare
   .class element selector (0,1,1 each), and the plugin's stylesheet
   prints BEFORE the theme's, so on a tie the theme won and these
   rendered at its 19px/16px instead. */
.reb-broker-form-wrap .reb-broker-account-section h3 {
	margin: 0;
	font-size: 22px;
	line-height: 1.3;
}

/* Hairline running to the end of the row, so each chapter reads as a
   band without a heavy divider (the section-divider borders were
   removed earlier for looking like stray input underlines — this sits
   beside the title, never under a field). */
.reb-broker-section-head::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--reb-border);
}

.reb-broker-account-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* Grid items default to min-width:auto and refuse to shrink below their
   content's intrinsic width — a styled file input is wide enough to
   push the row past the viewport on mobile without this. */
.reb-broker-account-row > *,
.reb-broker-repeater-row > * {
	min-width: 0;
}

/* Wider account page has room to put the 4 social/contact links on one
   row instead of stacking 2 separate 2-column rows. */
.reb-broker-account-row--four {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
	.reb-broker-account-row--four {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.reb-broker-account-row,
	.reb-broker-account-row--four {
		grid-template-columns: 1fr;
	}

	/* Once a row is a single column its own 24px row-gap stacks on top
	   of each child's 24px margin-bottom, so fields that happened to sit
	   in a row ended up double-spaced against fields that didn't. The
	   gap alone is the spacing here. */
	.reb-broker-form-wrap .reb-broker-account-row > .reb-field-float,
	.reb-broker-form-wrap .reb-broker-account-row > .reb-broker-account-field {
		margin-bottom: 0;
	}
}

.reb-broker-account-field {
	margin-bottom: 20px;
}

/* Three deliberate levels, no more:
     1. section head  — gold numeral + 17px title
     2. group title   — 13px, ink, sentence case (below)
     3. field label   — 11.5px uppercase muted, matching .reb-field-caption
   An earlier pass flattened 2 and 3 into one style; that made every
   label consistent but left group titles indistinguishable from the
   fields under them, so the grouping stopped reading at all. */
/* Every label and group title in the form uses the same treatment as a
   floated .reb-field-caption — gold, uppercase, tracked — so nothing
   reads as a different KIND of label. Grouping is carried by the cream
   panel each repeater sits in, not by giving its title its own type, so
   flattening the type here costs no structure. */
.reb-broker-account-field label,
.reb-broker-avatar-field > label:not(.reb-broker-dropzone),
.reb-broker-form-wrap .reb-broker-account-subgroup > label {
	display: block;
	margin: 0 0 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--reb-gold-deep);
}

/* Group titles keep more air beneath them — spacing still separates the
   levels even though the type no longer does. */
.reb-broker-form-wrap .reb-broker-account-subgroup > label {
	margin-bottom: 18px;
}

.reb-broker-account-field select,
.reb-broker-account-field textarea {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--reb-border);
	background: transparent;
	padding: 8px 2px;
	font-size: 15px;
	font-family: inherit;
	color: var(--reb-ink);
}

/* A quiet aside under a field — e.g. "ảnh này chỉ dùng để xác minh,
   không công khai" next to the cert-image upload — not a label, so it
   stays lowercase/regular rather than matching .reb-broker-account-field
   label's uppercase gold treatment above. */
.reb-field-note {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--reb-muted);
}

/* Cert-number field + its status badge side by side. align-items:center
   rather than flex-end — the floating label sits ABOVE the input's own
   baseline once filled, so anchoring to the input's bottom edge (its
   visual "line") reads more level with the badge than the field's own
   box edge would. */
.reb-broker-cert-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.reb-broker-cert-row .reb-field-float {
	flex: 1;
	min-width: 0;
	margin-bottom: 26px;
}

.reb-broker-cert-badge {
	flex: none;
	padding: 5px 12px;
	border: 1px solid;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
	cursor: default;
}

/* Same green as the public "Đã xác thực" badge (assets/css/frontend.css,
   .reb-sale-verified-badge) — one color for "REB vouches for this" across
   the whole product, public card and this private form alike. */
.reb-broker-cert-badge--verified {
	background: #ecfdf3;
	border-color: #abefc6;
	color: #067647;
}

.reb-broker-cert-badge--pending {
	background: #fcf6e3;
	border-color: #f0c33c;
	color: #7a5c00;
}

.reb-broker-cert-badge--missing {
	background: #fdf1ea;
	border-color: var(--reb-error);
	color: var(--reb-error);
}

@media (max-width: 480px) {
	.reb-broker-cert-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.reb-broker-cert-row .reb-field-float {
		width: 100%;
		margin-bottom: 8px;
	}
}

.reb-broker-cert-missing-note {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--reb-error);
}

.reb-broker-avatar-field {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	margin-bottom: 20px;
}

/* Click-or-drag upload zone. It's a <label> wrapping the real input, so
   clicking opens the picker with no JS at all; broker-account.js only
   adds the drag-and-drop half and the chosen-file name. */
.reb-broker-dropzone {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px;
	background: var(--reb-bg);
	border: 1px dashed var(--reb-border);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.reb-broker-dropzone:hover,
.reb-broker-dropzone.is-dragover {
	border-color: var(--reb-gold);
	background: #fff;
}

/* Visually hidden but still focusable, so keyboard users reach it and
   the focus ring below shows where they are. */
.reb-broker-dropzone input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.reb-broker-dropzone:focus-within {
	outline: 2px solid var(--reb-gold);
	outline-offset: 2px;
}

.reb-broker-dropzone-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--reb-muted);
}

.reb-broker-dropzone-text strong {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--reb-gold-deep);
}

.reb-broker-dropzone-text .reb-broker-dropzone-file {
	color: var(--reb-ink);
	word-break: break-all;
}

/* Format/size reads as part of the same sentence as the drag hint,
   inside the zone rather than stranded underneath it. */
.reb-broker-dropzone-note {
	font-size: 12.5px;
	line-height: 1.55;
}

.reb-broker-dropzone-action.is-file {
	color: var(--reb-ink);
	word-break: break-all;
}

/* The theme's `.reb-prose img { margin: 1.2em 0; border-radius: ... }`
   (0,1,1) outranks a bare class here and applies to these previews too:
   the 1.2em margins added 38px inside the drop zone — which is why its
   top/bottom padding looked bigger than its sides — and the radius reset
   flattened the round avatar. Prefixed for specificity. */
.reb-broker-form-wrap .reb-broker-avatar-preview,
.reb-broker-form-wrap .reb-broker-cover-preview {
	margin: 0;
	border-radius: 0;
}

.reb-broker-form-wrap .reb-broker-avatar-preview {
	border-radius: 50%;
}

.reb-broker-avatar-preview,
.reb-broker-cover-preview {
	flex: none;
	width: 100%;
	max-width: 260px;
	height: 150px;
	object-fit: cover;
	background: var(--reb-surface);
	border: 1px solid var(--reb-border);
}

.reb-broker-avatar-preview {
	max-width: 150px;
	height: 150px;
	border-radius: 50%;
}

/* Below this, avatar (150px) + cover (260px) previews plus the gap and
   padding leave too little width for the text beside them — it wraps to
   one word per line. Stack image above text instead of fighting for
   the same row. */
@media (max-width: 560px) {
	.reb-broker-dropzone {
		flex-direction: column;
		align-items: flex-start;
	}

	.reb-broker-avatar-preview,
	.reb-broker-cover-preview {
		max-width: 100%;
	}

	.reb-broker-avatar-preview {
		max-width: 150px;
	}
}

/* Repeater sections (Dự án đã bán, Nền tảng chuyên môn, ...) — a fixed
   set of rows (existing + ProfileFields::REPEATER_BLANK_ROWS blanks),
   plain <input> grid, no JS required to add up to that many new rows.
   assets/js/broker-account.js progressively enhances this with a real
   add/remove control — the trailing `auto` column below is reserved for
   the remove button it appends as each row's last grid item; without
   JS that column is simply empty. */
.reb-broker-repeater-row {
	display: grid;
	grid-template-columns: 2fr 2fr 1fr auto;
	align-items: center;
	column-gap: 10px;
	row-gap: 10px;
	margin-bottom: 14px;
}

.reb-broker-repeater[data-repeater="expertise"] .reb-broker-repeater-row,
.reb-broker-repeater[data-repeater="market_segments"] .reb-broker-repeater-row,
.reb-broker-repeater[data-repeater="achievements"] .reb-broker-repeater-row,
.reb-broker-repeater[data-repeater="sold_projects"] .reb-broker-repeater-row {
	grid-template-columns: 1fr auto;
}

/* Own rule, not folded into the shared one above: sold_projects' single
   "field" is a tall stack (search box + optional Chủ đầu tư hint +
   request hint/link), unlike the other 3 repeaters' single plain input —
   center would visually float the remove button in the middle of that
   stack instead of level with the search box at its top. */
.reb-broker-repeater[data-repeater="sold_projects"] .reb-broker-repeater-row {
	align-items: start;
}

/* Multi-field rows stack on narrow screens — at 375px several side-by-
   side inputs would leave too little room each. The remove button moves
   to its own trailing row, right-aligned; sold_projects (already a
   single field + remove button) falls through to this same base rule
   rather than getting its own re-override below, since one field
   stacked above its remove button reads fine at any width. */
@media (max-width: 640px) {
	.reb-broker-repeater-row {
		grid-template-columns: 1fr;
		row-gap: 8px;
		margin-bottom: 24px;
	}

	.reb-broker-repeater-row .reb-broker-repeater-remove {
		justify-self: end;
	}

	.reb-broker-repeater[data-repeater="expertise"] .reb-broker-repeater-row,
	.reb-broker-repeater[data-repeater="market_segments"] .reb-broker-repeater-row,
	.reb-broker-repeater[data-repeater="achievements"] .reb-broker-repeater-row {
		grid-template-columns: 1fr auto;
		margin-bottom: 14px;
	}
}

/* ------------------------------------------------------------------ */
/* "Dự án tiêu biểu đã bán" search-as-you-type combobox                 */
/* (templates/broker-account-form.php + assets/js/broker-account.js's   */
/* initProjectPickers()/openProjectRequestModal())                      */
/* ------------------------------------------------------------------ */

/* Positioning context for the absolutely-placed results dropdown below —
   the box itself is a plain .reb-broker-repeater-row input (styled by
   the shared rule further up this file), this wrapper only exists to
   anchor the dropdown to it.
   Flex row on wider screens so the resolved Chủ đầu tư sits BESIDE the
   search box instead of stacked under it, and the box itself gets the
   full remaining width instead of the browser's intrinsic ~20-char
   default (the shared .reb-broker-repeater-row input rule never set an
   explicit width, since every OTHER repeater it applies to is short
   enough not to need one). position:relative is unaffected by the flex
   switch — .reb-broker-project-results below is absolutely positioned,
   so it's not part of either layout's flow either way. */
.reb-broker-project-picker {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
}

.reb-broker-project-search {
	flex: 1 1 240px;
	min-width: 0; /* Lets the input actually shrink in a flex row instead of forcing overflow. */
	width: 100%;
}

@media (max-width: 640px) {
	/* Chủ đầu tư moves back under the box, which goes full-width — a
	   phone-width row has no room to sit them side by side. */
	.reb-broker-project-picker {
		flex-direction: column;
		align-items: stretch;
	}

	.reb-broker-project-search {
		flex-basis: auto;
	}
}

.reb-broker-project-results {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	right: 0;
	margin: 4px 0 0;
	padding: 4px;
	max-height: 260px;
	overflow-y: auto;
	list-style: none;
	background: var(--reb-surface);
	border: 1px solid var(--reb-border);
	box-shadow: 0 10px 24px rgba(20, 17, 15, 0.12);
}

.reb-broker-project-results li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 10px;
	font-size: 13.5px;
	color: var(--reb-ink);
	cursor: pointer;
}

.reb-broker-project-results li:hover {
	background: var(--reb-bg);
}

.reb-broker-project-result-title {
	font-weight: 600;
}

.reb-broker-project-result-developer {
	color: var(--reb-muted);
	font-size: 12px;
}

/* Chủ đầu tư resolved from a picked project — read-only display, never
   an input: it comes from the Project's own Taxonomies\Developer terms,
   never typed here directly.
   flex: none + white-space: nowrap on desktop — it's a sibling of
   .reb-broker-project-search in a flex row now, sized to its own text
   rather than stretching or wrapping mid-name. The ≤640px rule below
   puts it back to a plain block line under the box, wrapping normally,
   since there's no "beside" left to sit in at that width. */
.reb-broker-project-developer-hint {
	flex: none;
	white-space: nowrap;
	font-size: 12.5px;
	color: var(--reb-muted);
}

@media (max-width: 640px) {
	.reb-broker-project-developer-hint {
		display: block;
		width: 100%;
		white-space: normal;
		margin-top: 2px;
	}
}

/* The "not found — request it" entry inside the results dropdown.
   Stacked rather than the inline row a real result uses, so it reads as
   an offer ("no match / here's what you can do") instead of looking
   like one more project to pick by mistake. */
.reb-broker-project-results li.reb-broker-project-request {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	border-top: 1px solid var(--reb-border);
}

/* Only rule needed when it's the sole item — there's no result above it
   to be separated from. */
.reb-broker-project-results li.reb-broker-project-request:first-child {
	border-top: none;
}

.reb-broker-project-request-lead {
	color: var(--reb-muted);
	font-size: 12.5px;
}

.reb-broker-project-request-action {
	color: var(--reb-gold-deep);
	font-weight: 700;
}

/* 5 fields on one compact row (company/role/start/end/remove) + the
   optional description spanning full width below it, instead of the
   previous 2-column layout that split each entry across 3 visual rows.
   Each entry is 2 grid rows (fields + description) — a bigger row-gap
   than the single-line repeaters above so that inner seam reads
   clearly, and a much bigger margin-bottom between entries so one
   career entry doesn't blend into the next (flagged by the user: at
   the tighter default spacing, one entry's description sat right on
   top of the next entry's fields with barely any gap). Spacing only,
   no border — a divider line here would repeat the exact "looks like
   a stray input underline" complaint the section divider fix above
   already addressed. */
.reb-broker-repeater--career .reb-broker-repeater-row {
	grid-template-columns: 1.3fr 1.3fr 0.8fr 0.8fr auto;
	grid-template-areas:
		"company role start end remove"
		"desc desc desc desc desc";
	row-gap: 14px;
	margin-bottom: 32px;
}

.reb-broker-repeater--career .reb-broker-repeater-row:last-child {
	margin-bottom: 14px;
}

.reb-broker-repeater--career .reb-broker-repeater-row input[name*="[company]"] {
	grid-area: company;
}

.reb-broker-repeater--career .reb-broker-repeater-row input[name*="[role]"] {
	grid-area: role;
}

.reb-broker-repeater--career .reb-broker-repeater-row select[name*="[start_year]"] {
	grid-area: start;
}

.reb-broker-repeater--career .reb-broker-repeater-row select[name*="[end_year]"] {
	grid-area: end;
}

.reb-broker-repeater--career .reb-broker-repeater-row textarea {
	grid-area: desc;
}

.reb-broker-repeater--career .reb-broker-repeater-row .reb-broker-repeater-remove {
	grid-area: remove;
}

@media (max-width: 720px) {
	.reb-broker-repeater--career .reb-broker-repeater-row {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"company role"
			"start end"
			"desc desc"
			"remove remove";
	}

	.reb-broker-repeater--career .reb-broker-repeater-row .reb-broker-repeater-remove {
		justify-self: end;
	}
}

@media (max-width: 480px) {
	.reb-broker-repeater--career .reb-broker-repeater-row {
		grid-template-columns: 1fr;
		grid-template-areas:
			"company"
			"role"
			"start"
			"end"
			"desc"
			"remove";
	}
}

.reb-broker-repeater-row input,
.reb-broker-repeater-row select,
.reb-broker-repeater-row textarea {
	border: 1px solid var(--reb-border);
	background: var(--reb-surface);
	padding: 8px 10px;
	font-size: 14px;
	font-family: inherit;
	color: var(--reb-ink);
}

.reb-broker-repeater-remove {
	width: 24px;
	height: 24px;
	flex: none;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--reb-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease;
}

.reb-broker-repeater-remove:hover {
	color: var(--reb-error);
}

.reb-broker-repeater-add {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 10px 18px;
	border: 1px dashed var(--reb-border);
	border-radius: 999px;
	background: transparent;
	color: var(--reb-muted);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.reb-broker-repeater-add:hover {
	border-color: var(--reb-gold);
	color: var(--reb-gold-deep);
}

.reb-broker-repeater-add span {
	font-size: 16px;
	line-height: 1;
}

/* A repeater nested inside a bigger section alongside plain fields (e.g.
   "Dự án tiêu biểu đã bán" living under "Dự án & thị trường") needs a
   bit more breathing room above it than the 6px .reb-broker-account-field
   label already gives — otherwise it reads as a continuation of the
   field above rather than its own sub-group. */
.reb-broker-account-subgroup {
	margin-top: 28px;
}

/* Bio rich-text mini editor — assets/js/broker-account.js swaps the
   plain #bio textarea for this toolbar + contenteditable pair so the
   broker never has to type raw HTML by hand; the textarea stays in the
   DOM (hidden) as the actual submitted field, kept in sync on input.
   Without JS the plain textarea (still just <textarea name="bio">)
   remains the whole UI — this CSS only styles the enhanced state. */
.reb-broker-bio-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin-bottom: 8px;
}

.reb-broker-bio-buttons {
	display: flex;
	gap: 6px;
}

.reb-broker-bio-counter {
	font-size: 12px;
	color: var(--reb-muted);
	white-space: nowrap;
}

.reb-broker-bio-counter.is-at-limit {
	color: #b3261e;
	font-weight: 600;
}

.reb-broker-bio-btn {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--reb-border);
	border-radius: 6px;
	background: var(--reb-surface);
	color: var(--reb-ink);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.reb-broker-bio-btn:hover,
.reb-broker-bio-btn.is-active {
	border-color: var(--reb-gold);
	color: var(--reb-gold-deep);
}

.reb-broker-bio-btn[data-cmd="bold"] {
	font-weight: 700;
}

.reb-broker-bio-btn[data-cmd="italic"] {
	font-style: italic;
}

.reb-broker-bio-editor {
	min-height: 140px;
	border: 1px solid var(--reb-border);
	background: var(--reb-surface);
	padding: 12px 14px;
	font-size: 15px;
	font-family: inherit;
	line-height: 1.6;
	color: var(--reb-ink);
}

.reb-broker-bio-editor:focus {
	outline: none;
	border-color: var(--reb-gold);
}

.reb-broker-bio-editor strong {
	font-weight: 700;
}

.reb-broker-bio-editor em {
	font-style: italic;
}

.reb-broker-bio-editor blockquote {
	margin: 12px 0;
	padding: 10px 16px;
	border-left: 3px solid var(--reb-gold);
	background: var(--reb-bg);
	font-style: italic;
}

/* Account actions relocated into the theme's dark page hero
   (Broker\HeroActions). Sits under the H1, centred like the rest of the
   hero frame. */
.reb-broker-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin-top: 22px;
}

/* Secondary to the profile link beside it — a quiet link, not a second
   button competing for the same attention. */
.reb-broker-logout-link {
	color: rgba(247, 245, 240, 0.7);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(247, 245, 240, 0.3);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.reb-broker-logout-link:hover {
	color: var(--reb-gold-light, #e7c98a);
	border-bottom-color: var(--reb-gold-light, #e7c98a);
}

/* Confirm dialog (assets/js/broker-account.js) */
.reb-broker-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(23, 22, 20, 0.55);
}

.reb-broker-modal {
	width: 100%;
	max-width: 420px;
	padding: 28px;
	background: #fff;
	border: 1px solid #e9e2d4;
	box-shadow: 0 16px 40px rgba(20, 17, 15, 0.16);
}

.reb-broker-modal-title {
	margin: 0 0 8px;
	font-size: 18px;
	color: #221d18;
}

.reb-broker-modal-text {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.6;
	color: #221d18;
}

/* "Yêu cầu REB thêm dự án" modal fields (assets/js/broker-account.js's
   openProjectRequestModal()) — plain labeled inputs, not .reb-field-float;
   see that function's own comment for why. */
.reb-broker-modal-field {
	margin-bottom: 16px;
}

.reb-broker-modal-field-label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #5b4a3a;
}

.reb-broker-modal-field input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #cfc6b4;
	background: #fff;
	font-size: 14px;
	font-family: inherit;
	color: #221d18;
}

.reb-broker-modal-field input:focus {
	outline: none;
	border-color: #b8863c;
}

/* Chủ đầu tư autocomplete inside the "Yêu cầu REB thêm dự án" modal
   (assets/js/broker-account.js's openProjectRequestModal()). Positioning
   context for the dropdown below — same shape as
   .reb-broker-project-picker further up this file, kept separate rather
   than reused because this field lives outside .reb-broker-form-wrap
   (see .reb-broker-modal-field's own comment on why the modal doesn't
   reuse that page's usual field styling at all). */
.reb-broker-modal-field--dev {
	position: relative;
}

.reb-broker-modal-dev-results {
	position: absolute;
	z-index: 10;
	top: 100%;
	left: 0;
	right: 0;
	margin: 4px 0 0;
	padding: 4px;
	max-height: 200px;
	overflow-y: auto;
	list-style: none;
	background: #fff;
	border: 1px solid #cfc6b4;
	box-shadow: 0 10px 24px rgba(20, 17, 15, 0.12);
}

.reb-broker-modal-dev-results li {
	padding: 8px 10px;
	font-size: 13.5px;
	color: #221d18;
	cursor: pointer;
}

.reb-broker-modal-dev-results li:hover {
	background: #faf8f4;
}

.reb-broker-modal-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
}

/* The dialog sits outside .reb-broker-form-wrap, so .reb-btn-outline
   falls back to the theme's white surface + hairline border and all but
   disappears against the white card. Given an explicit edge here. */
.reb-broker-modal .reb-btn-outline {
	background: transparent;
	border-color: #cfc6b4;
	color: #3a332c;
}

.reb-broker-modal .reb-btn-outline:hover {
	border-color: #b8863c;
	color: #8c6423;
}

/* ===== Account page: panel flush under the page hero =====
   The theme's hero frame is min(--reb-container, viewport - 32px) — its
   wrapper pads 16px a side. The content below normally sits in
   .reb-container (24px a side, cap includes padding), so it can never
   line up with the hero at both large and small widths. On this one
   page (body class from Broker\Assets) the theme's wrappers are
   flattened and the panel re-creates the hero's own math instead, which
   matches at every width. */
body.reb-broker-account-page .reb-content-area {
	padding: 0 16px 72px;
}

body.reb-broker-account-page .reb-content-area .reb-container {
	max-width: none;
	padding: 0;
}

body.reb-broker-account-page .reb-content-area .reb-prose {
	max-width: none;
}

body.reb-broker-account-page .reb-broker-account {
	max-width: var(--reb-container, 1400px);
	margin: 0 auto;
	/* Top matches .reb-broker-account-section's own inter-section margin
	   so the hero→content gap reads the same as any 2 sections further
	   down. Scales with the viewport rather than a flat 80px: on a phone
	   that was a third of the screen of empty white before the first
	   control. Sides scale on the same idea. */
	padding: clamp(32px, 7vw, 80px) clamp(20px, 4vw, 56px) clamp(32px, 5vw, 56px);
	background: var(--reb-surface);
	border: 1px solid var(--reb-border);
	border-top: none;
}

/* ===== Content hierarchy & rhythm =====
   Spacing runs on one 8px-based scale (8 / 14 / 24 / 32 / 56) instead of
   the mix of 20/26/28 it had grown into. */
.reb-broker-form-wrap .reb-field-float,
.reb-broker-form-wrap .reb-broker-account-field {
	margin-bottom: 24px;
}

.reb-broker-account-row {
	gap: 24px;
}

/* Supporting text under a control — smaller and lighter than the label
   above it, so it never competes with either. */
.reb-broker-field-hint {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--reb-muted);
}

/* Hint that introduces a control sits above it instead. */
.reb-broker-bio-field .reb-broker-field-hint {
	margin: 0 0 12px;
}

.reb-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Repeater groups read as one block rather than loose rows drifting
   under a heading — same cream inset the image fields already use, so
   it's an existing pattern rather than a new one. */
.reb-broker-account-subgroup {
	margin-top: 40px;
	padding: 24px;
	background: var(--reb-bg);
	border: 1px solid var(--reb-border);
}

.reb-broker-account-subgroup:last-child,
.reb-broker-repeater-row:last-child {
	margin-bottom: 0;
}

/* The rows inside an inset group already sit on cream, so their own
   white inputs carry the contrast — no extra bottom gap needed. */
.reb-broker-account-subgroup .reb-broker-repeater-add {
	margin-top: 8px;
}

/* Named parts under the partial-save notice. */
.reb-broker-notice-list {
	margin: 8px 0 0;
	padding-left: 20px;
	list-style: disc;
}

.reb-broker-notice-list li {
	margin-top: 2px;
}

/* Saving / saved dialog (assets/js/broker-account.js). */
.reb-broker-modal--status {
	max-width: 340px;
	text-align: center;
}

.reb-broker-modal--status .reb-broker-modal-text {
	margin: 14px 0 0;
}

.reb-broker-modal--status .reb-btn {
	margin-top: 20px;
}

.reb-broker-spinner {
	display: block;
	width: 34px;
	height: 34px;
	margin: 0 auto;
	border: 3px solid #e9e2d4;
	border-top-color: #b8863c;
	border-radius: 50%;
	animation: reb-broker-spin 0.7s linear infinite;
}

@keyframes reb-broker-spin {
	to {
		transform: rotate(360deg);
	}
}

.reb-broker-tick {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 auto;
	border-radius: 50%;
	background: #eaf6ee;
	color: #2f6b4f;
	font-size: 20px;
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.reb-broker-spinner {
		animation-duration: 2s;
	}
}

/* "Không bắt buộc" — a quiet qualifier, not part of the label itself. */
.reb-broker-label-optional {
	margin-left: 8px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--reb-muted);
}

.reb-broker-image-reset {
	align-self: flex-start;
	margin-top: 10px;
	padding: 0;
	border: none;
	background: none;
	color: var(--reb-muted);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.reb-broker-image-reset:hover:not(:disabled) {
	color: var(--reb-gold-deep);
}

.reb-broker-image-reset:disabled {
	cursor: default;
	text-decoration: none;
	opacity: 0.75;
}

.reb-broker-dropzone.is-invalid {
	border-color: var(--reb-error);
	border-style: solid;
}

.reb-broker-file-error {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--reb-error);
}

/* Broker's own "Hoạt động / Tạm dừng" switch (templates/broker-account-form.php).
   A real radio group, not a styled checkbox: two named states a broker
   picks between reads clearer than one toggle whose "off" meaning has to
   be inferred — and it stays operable with CSS or JS unavailable. */
.reb-broker-status-switch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 28px;
	padding: 18px 20px;
	background: var(--reb-bg);
	border: 1px solid var(--reb-border);
}

.reb-broker-status-switch-text {
	flex: 1 1 260px;
	min-width: 0;
}

.reb-broker-form-wrap .reb-broker-status-switch-text h3 {
	margin: 0 0 4px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--reb-gold-deep);
}

.reb-broker-status-switch-text p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--reb-muted);
}

.reb-broker-status-options {
	display: flex;
	flex: none;
	padding: 3px;
	background: #fff;
	border: 1px solid var(--reb-border);
	/* Pill, matching .reb-btn's radius elsewhere in the form — the
	   sharp-cornered box read as a stray leftover from the rest of the
	   account page's square panels rather than a control of its own. */
	border-radius: 999px;
}

.reb-broker-status-option {
	position: relative;
	margin: 0;
	padding: 9px 22px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--reb-muted);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Visually hidden but focusable, so the ring below tracks keyboard use. */
.reb-broker-status-option input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.reb-broker-status-option:has(input:checked) {
	background: var(--reb-gold-deep);
	color: #fff;
}

/* Keyed off the input's VALUE, not a PHP-rendered class: a class would
   be a snapshot of the status at page load and go stale the moment the
   broker clicks, which showed up as "Tạm dừng" rendering gold or grey
   depending on which state the page happened to load in. */
.reb-broker-status-option:has(input[value="paused"]:checked) {
	background: #6c6357;
}

.reb-broker-status-option:has(input:focus-visible) {
	outline: 2px solid var(--reb-gold);
	outline-offset: 2px;
}

@media (max-width: 560px) {
	.reb-broker-status-options {
		width: 100%;
	}

	.reb-broker-status-option {
		flex: 1;
		text-align: center;
		padding: 10px 12px;
	}
}

/* ------------------------------------------------------------------ */
/* "Đánh giá" panel — REB's internal scores + customer reviews          */
/* ------------------------------------------------------------------ */

/* Score rows (REB's 5 internal criteria, and the same 5 averaged from
   approved customer reviews) — deliberately NOT the radar chart
   templates/parts/radar-chart.php renders on the public profile: that
   chart's grid/axis lines are hardcoded near-white at low opacity for
   the public page's dark hero card and would be almost invisible on
   this page's light background. A plain label+bar+value row needs no
   such assumption and reads better in a settings-style list anyway. */
.reb-broker-score-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.reb-broker-score-row {
	display: grid;
	grid-template-columns: 150px 1fr 40px;
	align-items: center;
	gap: 12px;
}

.reb-broker-score-label {
	font-size: 13px;
	color: var(--reb-muted);
}

.reb-broker-score-bar {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: var(--reb-bg);
	border: 1px solid var(--reb-border);
	overflow: hidden;
}

.reb-broker-score-bar-fill {
	position: absolute;
	inset: 0;
	width: 0;
	background: var(--reb-gold);
}

.reb-broker-score-value {
	font-size: 13px;
	font-weight: 700;
	color: var(--reb-ink);
	text-align: right;
}

.reb-broker-score-empty {
	color: var(--reb-muted);
	font-size: 13px;
	font-style: italic;
}

@media (max-width: 480px) {
	.reb-broker-score-row {
		grid-template-columns: 1fr 40px;
	}

	.reb-broker-score-label {
		grid-column: 1 / -1;
	}
}

/* Overall rating summary — big average + star row, echoes the public
   profile's .reb-review-summary but with this page's own token names. */
.reb-broker-review-summary {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

.reb-broker-review-summary-score {
	font-size: 32px;
	font-weight: 700;
	color: var(--reb-gold-deep);
}

.reb-stars {
	position: relative;
	display: inline-block;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 2px;
	vertical-align: middle;
}

.reb-stars-track {
	color: var(--reb-border);
}

.reb-stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--reb-gold);
}

.reb-stars-value {
	margin-left: 6px;
	font-weight: 700;
	font-size: 13px;
	vertical-align: middle;
}

.reb-stars-count {
	margin-left: 2px;
	font-size: 13px;
	color: var(--reb-muted);
	vertical-align: middle;
}

.reb-broker-review-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.reb-broker-review-item {
	border: 1px solid var(--reb-border);
	padding: 16px;
	background: var(--reb-surface);
}

.reb-broker-review-item-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-bottom: 8px;
}

.reb-broker-review-author {
	font-weight: 700;
	font-size: 14px;
	color: var(--reb-ink);
}

.reb-broker-review-date {
	font-size: 12px;
	color: var(--reb-muted);
}

.reb-broker-review-content {
	margin: 8px 0 0;
	color: var(--reb-ink);
	font-size: 14px;
	line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* "Liên kết HubSpot" panel — same .reb-broker-cert-row (field + badge   */
/* side by side) shape "Xác thực" uses for cert_no, so the two read as   */
/* one consistent "locked field" pattern instead of 2 different ones.    */
/* ------------------------------------------------------------------ */

/* The matched owner's name + the "Mở trang HubSpot" link, once locked —
   a single row rather than another label/value pair, since there's
   only ever this one piece of info left to show at that point. */
.reb-broker-hubspot-account {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
}

.reb-broker-hubspot-account-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--reb-ink);
}

/* ------------------------------------------------------------------ */
/* "Hoàn thiện hồ sơ" progress card                                     */
/* (templates/parts/broker-profile-progress.php)                        */
/*                                                                      */
/* Sits ABOVE .reb-broker-account-layout, not inside a panel, because    */
/* every row in it points at a different tab — it has to stay on screen  */
/* whichever tab is open.                                                */
/* ------------------------------------------------------------------ */
.reb-broker-progress {
	background: var(--reb-surface);
	border: 1px solid var(--reb-border);
	border-radius: 14px;
	padding: 20px 22px;
	margin: 0 0 28px;
}

/* center, not flex-start: the % is the block's headline and should read
   as level with the title + description together, not pinned to the top
   of a two-line block it stands twice the height of. */
.reb-broker-progress-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* .reb-broker-form-wrap prefix (0,2,1) is load-bearing, exactly as on the
   other two h3 rules in this file: the theme's `.reb-prose h3 {
   margin-top: 1.4em }` ties at (0,1,1) with a bare
   `.reb-broker-progress-title h3` and wins on cascade order, which pushed
   this whole text block down while the % stayed at the top. */
.reb-broker-form-wrap .reb-broker-progress-title h3 {
	margin: 0 0 4px;
	font-size: 16px;
}

.reb-broker-progress-title p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--reb-muted);
}

.reb-broker-progress-score strong {
	font-size: 26px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--reb-gold-deep);
}

.reb-broker-progress-bar {
	position: relative;
	height: 8px;
	margin: 16px 0 0;
	border-radius: 999px;
	background: var(--reb-bg);
	overflow: hidden;
}

.reb-broker-progress-bar > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--reb-gold);
	/* Animates when a save bumps the score, but only for users who
	   haven't asked the OS to stop motion. */
	transition: width 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.reb-broker-progress-bar > span {
		transition: none;
	}
}

/* Same 3 thresholds the admin column uses (Admin\ListTable::render_score)
   so a broker and REB read the same colour for the same number. The
   middle band (50-79) deliberately has no rule — it keeps the gold set
   on the base .reb-broker-progress-bar > span / -score strong above. */
.reb-broker-progress--low .reb-broker-progress-bar > span {
	background-color: var(--reb-error);
}

.reb-broker-progress--low .reb-broker-progress-score strong {
	color: var(--reb-error);
}

.reb-broker-progress--high .reb-broker-progress-bar > span {
	background-color: #067647;
}

.reb-broker-progress--high .reb-broker-progress-score strong {
	color: #067647;
}

/* Chips that flow and wrap, not full-width rows: the labels vary a lot in
   length ("Điền email liên hệ" vs "Tải ảnh chứng chỉ để REB đối chiếu"),
   so one row each left most of the card empty and made 5 short tasks look
   like a long list. Wrapping fits 2-3 per line and packs the same items
   into roughly half the height. */
.reb-broker-progress-list {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.reb-broker-progress-item a {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 7px 14px;
	border: 1px solid var(--reb-border);
	border-radius: 999px;
	background: var(--reb-bg);
	color: var(--reb-ink);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.45;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Specificity 0,2,1 — the account page renders inside the theme's
   .reb-prose, whose `.reb-prose a { text-decoration: underline }` (0,1,1)
   ties with a plain `.reb-broker-progress-item a` and then wins on
   cascade order. Exactly the clash already documented for a.reb-btn
   higher up this file; same scoped fix rather than touching .reb-prose,
   whose underlines are right for real body copy. */
.reb-broker-form-wrap .reb-broker-progress-item a {
	text-decoration: none;
}

.reb-broker-progress-item a:hover,
.reb-broker-progress-item a:focus-visible {
	border-color: var(--reb-gold);
	background: var(--reb-surface);
}

.reb-broker-progress-item-weight {
	flex: none;
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--reb-gold-deep);
	opacity: 0.85;
}

/* Waiting-on-REB rows (currently just cert once submitted): no gold
   accents anywhere on the chip — those read as "actionable", and there
   is nothing left here for the broker to act on. Muted border + muted
   pill instead of the amber "+N%" the rest of the list uses. */
.reb-broker-progress-item--waiting a {
	border-style: dashed;
	background: transparent;
}

.reb-broker-progress-item-waiting {
	flex: none;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--reb-border);
	color: var(--reb-muted);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.reb-broker-progress-more {
	margin-top: 10px;
}

.reb-broker-progress-more > summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--reb-gold-deep);
	/* list-style on the summary itself is what Safari honours; the
	   ::-webkit-details-marker rule below is for older WebKit. */
	list-style: none;
}

.reb-broker-progress-more > summary::-webkit-details-marker {
	display: none;
}

.reb-broker-progress-more > summary::after {
	content: " ▾";
}

.reb-broker-progress-more[open] > summary::after {
	content: " ▴";
}

@media (max-width: 600px) {
	.reb-broker-progress {
		padding: 16px 16px 18px;
	}

	.reb-broker-progress-head {
		/* The score is the headline on a narrow screen — put it first
		   rather than letting a 26px number wrap under a 2-line title. */
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 8px;
	}
}