/* SBS My Account 1.1.0: Trade Account login / sign up box (SBS Addons "access gate" widget, Luis) in the soft SBS look.
   Owner 2026-10-30: same look as the new My Account login, gold instead of navy and green, no black; on phones as wide as possible.
   Only colours, corners and spacing; the widget, its fields and its JavaScript are untouched. Selectors start with "html body" and use
   !important where the Elementor widget settings (.elementor-26321 ...) set colours. */
html body .sbs-access-gate {
	--gt-ink: #101828;
	--gt-gold: #c19031;
	--gt-gold2: #a87b25;
	--gt-goldlt: #f3e8d2;
	--gt-cream: #faf7f0;
	--gt-line: #e3e1dc;
	--gt-text: #2b3442;
	--gt-mute: #5d6675;
	border: 1px solid var(--gt-line) !important;
	border-radius: 24px !important;
	background: #fff !important;
	box-shadow: 0 12px 32px rgba(16, 24, 40, .08) !important;
	overflow: hidden;
	color: var(--gt-text);
}

/* photo side: the green box becomes a light card */
html body .sbs-access-gate .sbs-access-gate__visual { background-color: var(--gt-goldlt) !important; }
html body .sbs-access-gate .sbs-access-gate__visual-card {
	background: rgba(250, 247, 240, .94) !important;
	border-radius: 18px !important;
	box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
html body .sbs-access-gate .sbs-access-gate__visual-title { color: var(--gt-ink) !important; }
html body .sbs-access-gate .sbs-access-gate__visual-text { color: var(--gt-mute) !important; }

/* Log in / Create account switch */
html body .sbs-access-gate .sbs-access-gate__auth-switch {
	background: var(--gt-cream) !important;
	border: 1px solid var(--gt-line) !important;
	box-shadow: none !important;
	border-radius: 999px !important;
}
html body .sbs-access-gate .sbs-access-gate__auth-switch button { color: var(--gt-mute) !important; white-space: nowrap; }
html body .sbs-access-gate .sbs-access-gate__auth-switch button span { background: #fff !important; color: var(--gt-mute) !important; }
html body .sbs-access-gate .sbs-access-gate__auth-switch button.is-active {
	background: #fff !important;
	color: var(--gt-gold2) !important;
	box-shadow: 0 2px 8px rgba(16, 24, 40, .08) !important;
}
html body .sbs-access-gate .sbs-access-gate__auth-switch button.is-active span { background: var(--gt-goldlt) !important; color: var(--gt-gold2) !important; }

/* login head */
html body .sbs-access-gate .sbs-access-gate__login-icon {
	background: var(--gt-gold) !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(193, 144, 49, .28) !important;
}
html body .sbs-access-gate .sbs-access-gate__login-kicker,
html body .sbs-access-gate .sbs-access-gate__eyebrow { color: var(--gt-gold2) !important; }
html body .sbs-access-gate .sbs-access-gate__login-intro h3,
html body .sbs-access-gate .sbs-access-gate__title,
html body .sbs-access-gate .sbs-access-gate__form-section strong { color: var(--gt-ink) !important; }
html body .sbs-access-gate .sbs-access-gate__login-copy,
html body .sbs-access-gate .sbs-access-gate__text,
html body .sbs-access-gate .sbs-access-gate__form-section small,
html body .sbs-access-gate .sbs-access-gate__document-help { color: var(--gt-mute) !important; }

/* fields */
html body .sbs-access-gate .sbs-access-gate__login-field > span:first-child,
html body .sbs-access-gate .sbs-access-gate__field > span:first-child { color: var(--gt-ink) !important; }
html body .sbs-access-gate .sbs-access-gate__login-field em,
html body .sbs-access-gate .sbs-access-gate__field em { color: var(--gt-gold2) !important; font-style: normal; }
html body .sbs-access-gate .sbs-access-gate__trade-login input[type="text"],
html body .sbs-access-gate .sbs-access-gate__trade-login input[type="password"],
html body .sbs-access-gate .sbs-access-gate__field input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
html body .sbs-access-gate .sbs-access-gate__field select,
html body .sbs-access-gate .sbs-access-gate__field textarea {
	background: #fff !important;
	border-color: var(--gt-line) !important;
	border-radius: 12px !important;
	color: var(--gt-ink) !important;
	box-shadow: none !important;
}
html body .sbs-access-gate .sbs-access-gate__trade-login input:focus,
html body .sbs-access-gate .sbs-access-gate__field input:focus,
html body .sbs-access-gate .sbs-access-gate__field select:focus,
html body .sbs-access-gate .sbs-access-gate__field textarea:focus {
	border-color: var(--gt-gold) !important;
	box-shadow: 0 0 0 3px rgba(193, 144, 49, .18) !important;
	outline: 0 !important;
}
html body .sbs-access-gate .sbs-access-gate__password-wrap button { background: var(--gt-cream) !important; color: var(--gt-gold2) !important; }
html body .sbs-access-gate .sbs-access-gate__login-options label { color: var(--gt-text) !important; }
html body .sbs-access-gate .sbs-access-gate__login-options input[type="checkbox"] { accent-color: var(--gt-gold); }
html body .sbs-access-gate .sbs-access-gate__login-options a,
html body .sbs-access-gate .sbs-access-gate__login-link { color: var(--gt-gold2) !important; }

/* buttons: gold, round */
html body .sbs-access-gate .sbs-access-gate__login-submit,
html body .sbs-access-gate .sbs-access-gate__login-fallback,
html body .sbs-access-gate .sbs-access-gate__button {
	background: var(--gt-gold) !important;
	border-color: var(--gt-gold) !important;
	color: #fff !important;
	border-radius: 999px !important;
	box-shadow: 0 6px 16px rgba(193, 144, 49, .28) !important;
}
html body .sbs-access-gate .sbs-access-gate__login-submit:hover,
html body .sbs-access-gate .sbs-access-gate__login-fallback:hover,
html body .sbs-access-gate .sbs-access-gate__button:hover { background: var(--gt-gold2) !important; border-color: var(--gt-gold2) !important; }
html body .sbs-access-gate .sbs-access-gate__login-submit i,
html body .sbs-access-gate .sbs-access-gate__button i { background: rgba(255, 255, 255, .2) !important; }
html body .sbs-access-gate .sbs-access-gate__auth-footer { color: var(--gt-mute) !important; }
html body .sbs-access-gate .sbs-access-gate__auth-footer button { background: var(--gt-goldlt) !important; color: var(--gt-gold2) !important; }
html body .sbs-access-gate .sbs-access-gate__auth-footer button:hover { background: #ecdcbc !important; }

/* sign up extras: uploads and progress in gold */
html body .sbs-access-gate .sbs-access-gate__file-icon { background: var(--gt-goldlt) !important; color: var(--gt-gold2) !important; }
html body .sbs-access-gate .sbs-access-gate__file-track > span,
html body .sbs-access-gate .sbs-access-gate__progress-track > span { background: var(--gt-gold) !important; box-shadow: none !important; }
html body .sbs-access-gate .sbs-access-gate__progress-steps li.is-active { color: var(--gt-gold2) !important; }
html body .sbs-access-gate .sbs-access-gate__progress-steps li.is-active > span { background: var(--gt-gold) !important; border-color: var(--gt-gold) !important; box-shadow: 0 0 0 4px rgba(193, 144, 49, .14) !important; }
html body .sbs-access-gate .sbs-access-gate__field--file input[type="file"]::file-selector-button { background: var(--gt-cream) !important; color: var(--gt-gold2) !important; border-color: var(--gt-line) !important; }

/* phones: as wide as possible, short photo */
@media (max-width: 767px) {
	html body .e-con-inner:has(.sbs-access-gate),
	html body .e-con:has(> .e-con-inner .sbs-access-gate) { padding-left: 0 !important; padding-right: 0 !important; }
	html body .sbs-access-gate { width: calc(100vw - 16px) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; border-radius: 20px !important; }
	html body .sbs-access-gate .sbs-access-gate__visual { height: 160px !important; min-height: 0 !important; max-height: 160px !important; overflow: hidden; }
	html body .sbs-access-gate .sbs-access-gate__visual-img { width: 100% !important; height: 160px !important; object-fit: cover; }
	html body .sbs-access-gate .sbs-access-gate__visual-card { display: none !important; } /* short and clean on phones: photo only */
	html body .sbs-access-gate .sbs-access-gate__panel { padding: 22px 14px 26px !important; }
	html body .sbs-access-gate .sbs-access-gate__panel-inner { width: 100% !important; padding: 0 !important; }
	html body .sbs-access-gate .sbs-access-gate__auth,
	html body .sbs-access-gate .sbs-access-gate__auth-switch { width: 100% !important; max-width: none !important; }
	html body .sbs-access-gate .sbs-access-gate__auth-switch { grid-template-columns: 1fr 1fr !important; }
	html body .sbs-access-gate .sbs-access-gate__auth-switch button { min-width: 0 !important; justify-content: center; gap: 6px; padding: 9px 6px !important; font-size: 14px !important; }
	html body .sbs-access-gate input,
	html body .sbs-access-gate select { font-size: 16px !important; } /* no zoom on iPhone */
}

/* 1.1.1 owner 2026-10-30: logged out, the photo side shows our intro (same as the My Account login): what the account gives, how trade works */
html body .sbs-access-gate .sbs-access-gate__visual:has(.sbs-gi) {
	display: block !important;
	padding: 48px 40px !important;
	background: linear-gradient(160deg, #fff 0%, var(--gt-goldlt) 100%) !important;
	border-right: 1px solid var(--gt-line);
}
html body .sbs-access-gate .sbs-access-gate__visual:has(.sbs-gi) > .sbs-access-gate__visual-img,
html body .sbs-access-gate .sbs-access-gate__visual:has(.sbs-gi) > .sbs-access-gate__visual-card,
html body .sbs-access-gate .sbs-access-gate__visual:has(.sbs-gi) > img { display: none !important; }
html body .sbs-gi { position: relative; max-width: 460px; }
html body .sbs-gi-eyebrow { margin: 0 0 10px !important; color: var(--gt-gold2); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
html body .sbs-gi-title { margin: 0 0 12px !important; color: var(--gt-ink) !important; font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.1 !important; font-weight: 800 !important; }
html body .sbs-gi-lead { margin: 0 0 24px !important; color: var(--gt-mute); font-size: 16px; line-height: 1.55; }
html body .sbs-gi-list { margin: 0 0 28px !important; padding: 0 !important; list-style: none !important; }
html body .sbs-gi-list li { position: relative; margin: 0 0 14px; padding-left: 36px; color: var(--gt-text); line-height: 1.45; list-style: none; }
html body .sbs-gi-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--gt-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
html body .sbs-gi-note { display: grid; gap: 6px; padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .8); border: 1px solid var(--gt-line); color: var(--gt-mute); font-size: 14px; line-height: 1.5; }
html body .sbs-gi-note strong { color: var(--gt-ink); font-size: 15px; }

@media (max-width: 767px) {
	html body .sbs-access-gate .sbs-access-gate__shell:has(.sbs-gi) { display: flex !important; flex-direction: column !important; }
	html body .sbs-access-gate .sbs-access-gate__visual:has(.sbs-gi) {
		order: 2;
		height: auto !important;
		max-height: none !important;
		flex-basis: auto !important;
		padding: 24px 18px !important;
		border-right: 0;
		border-top: 1px solid var(--gt-line);
	}
	html body .sbs-access-gate .sbs-access-gate__shell:has(.sbs-gi) > .sbs-access-gate__panel { order: 1; }
	html body .sbs-gi-title { font-size: 26px !important; }
	html body .sbs-gi-lead { margin-bottom: 18px !important; font-size: 15px; }
	html body .sbs-gi-list li { margin-bottom: 10px; font-size: 14px; }
}

/* 1.1.4 owner 2026-10-30: no cut text in the sign up dropdowns and hints: two columns instead of three, account type on its own row */
@media (min-width: 768px) { /* the widget grid has 12 parts: 6 each = two fields per row (it used 4 and 3) */
	html body .sbs-access-gate .sbs-access-gate__grid > .sbs-access-gate__field:not(.sbs-access-gate__field--full) { grid-column: span 6 !important; }
}
html body .sbs-access-gate .sbs-access-gate__field--account-type { grid-column: 1 / -1 !important; }
html body .sbs-access-gate .sbs-access-gate__field--account-type .sbs-access-gate__control { max-width: 420px; }
html body .sbs-access-gate .sbs-access-gate__field select { text-overflow: ellipsis; }
html body .sbs-access-gate .sbs-access-gate__trade-only.sbs-access-gate__account-type-hidden,
html body .sbs-access-gate .sbs-access-gate__public-hide.sbs-access-gate__account-type-hidden { display: none !important; }
/* 1.1.5: also the untagged "Business Details" / "Business Documents" headings and the document help line (gate.js marks them) */
html body .sbs-access-gate .sbs-access-gate__account-type-hidden { display: none !important; }
html body .sbs-access-gate .sbs-access-gate__field select { padding-right: 58px !important; font-size: 15px !important; }
html body .sbs-access-gate .sbs-access-gate__field--account-type select { width: 100% !important; }
@media (min-width: 768px) {
	html body .sbs-access-gate .sbs-access-gate__grid > .sbs-access-gate__field--business_notes,
	html body .sbs-access-gate .sbs-access-gate__grid > .sbs-access-gate__field--full_address { grid-column: 1 / -1 !important; }
}
@media (min-width: 768px) { /* long dropdown text and notes: own row */
	html body .sbs-access-gate .sbs-access-gate__grid .sbs-access-gate__field.sbs-access-gate__field--trade_type,
	html body .sbs-access-gate .sbs-access-gate__grid .sbs-access-gate__field.sbs-access-gate__field--business_notes,
	html body .sbs-access-gate .sbs-access-gate__grid .sbs-access-gate__field.sbs-access-gate__field--full_address { grid-column: 1 / -1 !important; }
}