/* Public login / register (2026-10-04): the pop-up (#bitzoAuthModal) and the standalone login + OTP pages share one look - a brand panel on the left (what you get),
   the form on the right. Loaded after bitzo-pages.css. Brand colours come from Admin -> Branding (--bz-primary, --bz-on-primary ...). The category chooser is in bitzo-catpicker.css. */

/* ---------- shell: pop-up ---------- */
body.bz-site .bz-am-dialog { max-width: 920px; }
body.bz-site .bz-am .bz-am-content { padding: 0; border: 0; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgba(27, 23, 33, .30); max-height: calc(100vh - 2rem); }
body.bz-site .bz-am .modal-body.bz-am-main { padding: 34px 38px 26px; text-align: left; }
.bz-am-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); min-height: 0; }
.bz-am .bz-am-grid { max-height: calc(100vh - 2rem); }
.bz-am .bz-am-main { overflow-y: auto; overscroll-behavior: contain; }
body.bz-site .bz-am .bitzo-modal-close { top: 16px; right: 16px; z-index: 5; width: 34px; height: 34px; padding: 0; border-radius: 50%; background-color: #fff; background-size: 11px; box-shadow: 0 2px 8px rgba(27, 23, 33, .16); opacity: 1; }
body.bz-site .bz-am .bitzo-modal-close:hover { background-color: #F3F4F8; }

/* ---------- brand panel ---------- */
.bz-am-side { position: relative; display: flex; flex-direction: column; gap: 0; padding: 38px 30px 26px; overflow: hidden; color: var(--bz-on-primary, #1C1620);
	background: linear-gradient(160deg, var(--bz-primary, #FEC109) 0%, var(--bitzo-gradient, var(--bz-primary, #FEC109)) 100%);
	background: linear-gradient(160deg, var(--bz-primary, #FEC109) 0%, color-mix(in srgb, var(--bz-primary, #FEC109) 72%, #fff) 100%); }
.bz-am-side::before { content: ''; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.bz-am-side::after { content: ''; position: absolute; left: -70px; bottom: -90px; width: 230px; height: 230px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.bz-am-side > * { position: relative; z-index: 1; }
.bz-am-eyebrow { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .62); font-size: 12px; font-weight: 600; color: #1B1721; }
.bz-am-eyebrow i { font-size: 11px; }
.bz-am-side h2 { margin: 18px 0 0; font-size: 30px; line-height: 1.18; font-weight: 800; letter-spacing: -.02em; color: inherit; }
.bz-am-lead { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: inherit; opacity: .86; }
.bz-am-perks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.bz-am-perks li { display: flex; align-items: center; gap: 13px; }
.bz-am-perks .pi { flex: none; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .7); box-shadow: 0 4px 12px rgba(27, 23, 33, .08); }
.bz-am-perks .pi img { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(27, 23, 33, .18)); }
.bz-am-perks b { display: block; font-size: 14px; font-weight: 700; }
.bz-am-perks small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.45; opacity: .85; }
.bz-am-art { align-self: flex-end; width: 150px; height: auto; margin: auto -6px -12px 0; padding-top: 14px; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(27, 23, 33, .22)); pointer-events: none; }

/* ---------- main column ---------- */
.bz-am-main .logo, .bz-ap-main .logo { display: block; height: 30px; width: auto; margin: 0 0 18px; }
.bz-am-title { margin: 0 0 16px; font-size: 22px; font-weight: 800; letter-spacing: -.015em; color: var(--bz-ink, #1B1721); }
body.bz-site .bz-am .bz-am-tabs { display: flex; gap: 4px; margin: 0 0 18px; padding: 4px; border: 0; border-radius: 14px; background: #F3F4F8; }
body.bz-site .bz-am .bz-am-tabs .nav-item { flex: 1; }
body.bz-site .bz-am .bz-am-tabs .nav-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; border-radius: 11px; background: transparent; font-size: 14px; font-weight: 600; color: var(--bz-muted, #6B6675); transition: background .15s, color .15s, box-shadow .15s; }
body.bz-site .bz-am .bz-am-tabs .nav-link i { font-size: 13px; }
body.bz-site .bz-am .bz-am-tabs .nav-link:hover { color: var(--bz-ink, #1B1721); }
body.bz-site .bz-am .bz-am-tabs .nav-link.active { background: #fff; color: var(--bz-ink, #1B1721); box-shadow: 0 1px 3px rgba(27, 23, 33, .12), 0 4px 12px rgba(27, 23, 33, .06); }
body.bz-site .bz-am .bitzo-modal-sub, .bz-ap-sub { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--bz-muted, #6B6675); text-align: left; }
body.bz-site .bz-am .bz-auth-step, body.bz-site .bz-ap .bz-auth-step { margin: 0 0 14px; }
body.bz-site .bz-am .bitzo-modal-error { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: #FDEAEA; border: 1px solid #F5C6C6; color: #B42318; font-size: 13px; line-height: 1.5; text-align: left; }
body.bz-site .bz-am .bitzo-modal-error[hidden] { display: none; }

/* fields (modal + pages) */
body.bz-site .bz-am .bitzo-auth-field, body.bz-site .bz-ap .bitzo-auth-field { margin: 0 0 16px; text-align: left; }
body.bz-site .bz-am .bitzo-auth-field > label, body.bz-site .bz-ap .bitzo-auth-field > label, body.bz-site .bz-am .cp-head label { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 600; color: var(--bz-ink, #1B1721); }
body.bz-site .bz-am .cp-head label { margin: 0; }
body.bz-site .bz-am .input-row, body.bz-site .bz-ap .input-row { display: flex; align-items: stretch; border: 1.5px solid #DDD7E7; border-radius: 14px; background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
body.bz-site .bz-am .input-row:focus-within, body.bz-site .bz-ap .input-row:focus-within { border-color: var(--bz-primary); box-shadow: 0 0 0 4px rgba(var(--bz-primary-rgb, var(--bitzo-primary-rgb, 91, 12, 154)), .14); }
body.bz-site .bz-am .input-row .prefix, body.bz-site .bz-ap .input-row .prefix { display: flex; align-items: center; padding: 0 14px; background: #F4F3F8; border-right: 1px solid #E5E0EC; font-size: 14px; font-weight: 600; color: #5E586B; }
body.bz-site .bz-am .input-row input, body.bz-site .bz-am .input-row select, body.bz-site .bz-ap .input-row input { flex: 1; min-width: 0; height: 50px; padding: 0 14px; border: 0; background: transparent; font-size: 15px; letter-spacing: normal; color: var(--bz-ink, #1B1721); outline: 0; box-shadow: none; }
body.bz-site .bz-am .input-row input::placeholder, body.bz-site .bz-ap .input-row input::placeholder { color: #A39DAE; }
body.bz-site .bz-am .input-row input.bz-otp, body.bz-site .bz-ap .input-row input.bz-otp { text-align: center; letter-spacing: .55em; padding-left: calc(14px + .55em); font-size: 22px; font-weight: 700; }
body.bz-site .bz-am .input-row input.bz-otp::placeholder, body.bz-site .bz-ap .input-row input.bz-otp::placeholder { letter-spacing: .3em; font-weight: 400; }
.bz-am-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* buttons + links */
body.bz-site .bz-am .bitzo-btn-primary, body.bz-site .bz-ap .bitzo-btn-primary { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 50px; margin: 4px 0 0; border-radius: 14px; font-size: 15px; font-weight: 700; box-shadow: 0 6px 18px rgba(var(--bz-primary-rgb, var(--bitzo-primary-rgb, 91, 12, 154)), .28); }
body.bz-site .bz-am .bitzo-btn-primary i, body.bz-site .bz-ap .bitzo-btn-primary i { font-size: 13px; transition: transform .15s; }
body.bz-site .bz-am .bitzo-btn-primary:hover i, body.bz-site .bz-ap .bitzo-btn-primary:hover i { transform: translateX(3px); }
.bz-am-otpbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.bz-am-link { border: 0; background: none; padding: 6px 2px; font: inherit; font-size: 13px; font-weight: 600; color: var(--bitzo-primary-text, var(--bz-ink, #1B1721)); cursor: pointer; text-decoration: none; }
.bz-am-link:hover:not(:disabled) { text-decoration: underline; }
.bz-am-link:disabled { color: #A39DAE; cursor: default; }
.bz-ap-resend { margin: 0; }
body.bz-site .bz-am .bitzo-auth-hint, body.bz-site .bz-ap .bitzo-auth-hint { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; font-size: 13px; text-align: left; }
.bz-am-terms { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--bz-muted, #6B6675); text-align: center; }
.bz-am-terms a { color: var(--bitzo-primary-text, var(--bz-ink)); font-weight: 600; text-decoration: underline; }
body.bz-site .bz-am .bz-am-seller { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--bz-line, #E5E2EB); font-size: 13px; text-align: center; color: var(--bz-muted, #6B6675); }
body.bz-site .bz-am .bz-am-seller a { color: var(--bitzo-primary-text, var(--bz-ink)); font-weight: 600; }
body.bz-site .bz-am .bz-am-seller i { margin-right: 4px; }

/* the register form is long: the category chooser keeps its own scroll area short inside the pop-up */
.bz-am .cp-field { margin-bottom: 18px; }
.bz-am .cp-grid { max-height: 232px; }

/* ---------- standalone pages ---------- */
.bz-ap-wrap { padding: 34px 12px 60px; }
.bz-ap { max-width: 960px; margin: 0 auto; border: 1px solid var(--bz-line, #E5E2EB); border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 24px 70px rgba(27, 23, 33, .10); }
.bz-ap .bz-am-grid { min-height: 520px; }
.bz-ap-main { display: flex; flex-direction: column; justify-content: center; padding: 42px 44px 30px; text-align: left; }
.bz-ap-main h1 { margin: 0 0 8px; font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: var(--bz-ink, #1B1721); }
.bz-ap-sub { margin: 0 0 20px; }
body.bz-site .bz-ap .bitzo-auth-error { margin: 0 0 14px; text-align: left; }
.bz-ap-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; font-size: 12.5px; color: var(--bz-muted, #6B6675); }
.bz-ap-or::before, .bz-ap-or::after { content: ''; flex: 1; height: 1px; background: var(--bz-line, #E5E2EB); }
.bz-ap-alt { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 48px; border: 1.5px solid var(--bz-line, #E5E2EB); border-radius: 14px; background: #fff; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--bz-ink, #1B1721); cursor: pointer; transition: border-color .15s, background .15s; }
.bz-ap-alt:hover { border-color: var(--bz-primary); background: var(--bz-primary-50); }
.bz-ap-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; margin-top: 24px; font-size: 13px; color: var(--bz-muted, #6B6675); }
.bz-ap-foot a { color: var(--bitzo-primary-text, var(--bz-ink)); font-weight: 600; }
.bz-ap .bz-am-otpbar { margin-top: 16px; }

/* ---------- picture panel (Admin -> Branding -> Login images -> "User login image"): the picture fills the left half, the form stays on the right ---------- */
.bz-am-side.bz-am-photo { padding: 0; min-height: 0; background: #ECE9F2; }
.bz-am-side.bz-am-photo::before, .bz-am-side.bz-am-photo::after { display: none; }
.bz-am-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (min-width: 768px) {   /* on a phone the picture is hidden (below) and only the form is shown */
	.bz-am-grid:has(> .bz-am-photo) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.bz-ap.bz-am-grid:has(> .bz-am-photo) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 580px; max-width: 1040px; }
	body.bz-site .bz-am-dialog:has(.bz-am-photo) { max-width: 1040px; }
}

/* ---------- small screens ---------- */
@media (max-width: 767.98px) {
	body.bz-site .bz-am-dialog { margin: .6rem; max-width: none; }
	.bz-am-grid { grid-template-columns: minmax(0, 1fr); }
	.bz-am .bz-am-side, .bz-ap .bz-am-side.bz-am-photo { display: none; }
	body.bz-site .bz-am .modal-body.bz-am-main { padding: 26px 20px 20px; }
	.bz-am-title { font-size: 20px; padding-right: 36px; }
	.bz-ap-wrap { padding: 16px 10px 40px; }
	.bz-ap .bz-am-grid { min-height: 0; }
	.bz-ap .bz-am-side { order: 2; padding: 24px 20px 4px; }   /* the benefits sit under the form on a phone */
	.bz-ap .bz-am-side h2 { font-size: 22px; }
	.bz-ap .bz-am-art { width: 110px; }
	.bz-ap-main { order: 1; padding: 26px 20px 22px; }
	.bz-ap-main h1 { font-size: 23px; }
}
@media (max-width: 575.98px) {
	.bz-am-two { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .bz-am .nav-link, .bz-am .input-row, .bz-am .bitzo-btn-primary i, .bz-ap .bitzo-btn-primary i { transition: none; } }

/* logo in the flex column of the standalone pages must keep its own width */
.bz-ap-main .logo { align-self: flex-start; max-width: 200px; object-fit: contain; }

/* the pop-up never grows taller than the screen: the row is as tall as the pop-up allows, and only the form column scrolls */
.bz-am .bz-am-grid { grid-template-rows: minmax(0, 1fr); }
/* the "Send OTP" button of the long register form stays in reach while the form scrolls */
.bz-am-stickybar { position: sticky; bottom: -1px; z-index: 2; margin: 6px -38px -2px; padding: 14px 38px 12px; background: linear-gradient(to top, #fff 80%, rgba(255, 255, 255, 0)); }
.bz-am-stickybar .bitzo-btn-primary { margin-top: 0; }
@media (max-width: 767.98px) { .bz-am-stickybar { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } }

/* "I agree" box of the Register tab (an account cannot be created without it) */
.bz-am-agree { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 12px; padding: 12px 14px; border: 1.5px solid var(--bz-line, #E5E2EB); border-radius: 14px; background: #FAFAFC; font-size: 12.6px; line-height: 1.55; color: var(--bz-muted, #6B6675); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.bz-am-agree:has(input:checked) { border-color: var(--bz-primary); background: var(--bz-primary-50); }
.bz-am-agree input { flex: none; width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--bz-primary); cursor: pointer; }
.bz-am-agree a { color: var(--bitzo-primary-text, var(--bz-ink)); font-weight: 600; text-decoration: underline; }
.bz-am-agree b { color: var(--bz-ink, #1B1721); font-weight: 600; }