/* RBSS promo banner + lead-form modal (MAR-52694).
 *
 * Mirrors the v2 /filemaker "Get in touch" modal + agentic banner on the legacy
 * static pages. Values are the AUTHORITATIVE v2 design tokens (legacy pages
 * don't load tokens.css/tailwind, so they're inlined here):
 *   Modal: rounded 10px · padding 32px (lg) · 70vw wide (lg) · shadow-dropdown
 *   Fields: 54px tall · 16px pad · #f5f5f7 fill · radius 10px · 20px text
 *   Label 14px/600 · heading 28px/600 · sub 20px · brand #2f54e5→#5b7cff
 */

.rbss-banner,
#rbss-overlay {
	--rbss-font: "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Guard box model against legacy global CSS bleed (fonts left to the site). */
#rbss-overlay,
#rbss-overlay *,
#rbss-overlay *::before,
#rbss-overlay *::after {
	box-sizing: border-box;
	font-family: var(--rbss-font);
}

/* ── Banner (self-contained bar — mirrors v2 agentic banner) ─────────────── */

.rbss-banner {
	position: relative;
	background: radial-gradient(73.79% 5040.99% at 24.41% -215.91%, #0368d9 0%, #ac4685 100%);
	text-align: center;
}

/* Guard the banner from legacy global CSS bleed (box model only — do NOT reset
   margin here: an id-specificity `margin:0` would override .rbss-banner-inner's
   `margin:0 auto` and left-shift the bar on screens wider than 1660px). */
#rbss-promo-banner,
#rbss-promo-banner *,
#rbss-promo-banner *::before,
#rbss-promo-banner *::after {
	box-sizing: border-box;
	font-family: var(--rbss-font);
}

/* Reset margins on the inner children only (NOT .rbss-banner-inner) so legacy
   `a`/element margins can't shift vertical alignment, while the inner keeps its
   `margin: 0 auto` horizontal centering. */
#rbss-promo-banner .rbss-banner-link,
#rbss-promo-banner .rbss-banner-cta,
#rbss-promo-banner .rbss-banner-chevron,
#rbss-promo-banner .rbss-banner-close {
	margin: 0;
}

/* Pin text weights with id-level specificity so the legacy `a, p { font-weight:
   400 }` rule on v1 pages can't override them (v2 pages don't load that rule).
   Matches v2: 600 for heading/label/submit/CTA, 400 for the rest. */,
#rbss-overlay .rbss-field label,
#rbss-overlay .rbss-submit,
#rbss-promo-banner {
	font-weight: unset;
}
#rbss-overlay .rbss-sub,
#rbss-overlay .rbss-privacy,
#rbss-overlay .rbss-field input,
#rbss-overlay .rbss-field select,
#rbss-overlay .rbss-optin-label span,
#rbss-promo-banner .rbss-banner-link {
	font-weight: unset;
}

.rbss-banner-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	max-width: 1660px;
	margin: 0 auto;
	padding: 4px 60px;
	text-align: center;
}
@media only screen and (max-width: 1150px) { .rbss-banner-inner { padding: 4px 40px; } }
@media only screen and (max-width: 734px) { .rbss-banner-inner { padding: 6px 44px; } }

.rbss-banner-link {
	font-family: var(--rbss-font);
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: normal;
	text-decoration: none;
	cursor: pointer;
}
.rbss-banner-link:hover { color: #fff; opacity: 0.9; }

.rbss-banner-cta {
	font-weight: 600;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.rbss-banner-chevron { flex: none; transform: rotate(-90deg); }

.rbss-banner-close {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	opacity: 0.9;
}
.rbss-banner-close:hover { opacity: 1; }
@media only screen and (min-width: 735px) { .rbss-banner-close { right: 42px; } }

@media only screen and (max-width: 734px) {
	.rbss-banner-link { font-size: 18px; }
}

/* ── Modal shell (Modal.tsx: backdrop p-5 lg:px-[15%]; dialog rounded-10 p-8) ── */

.rbss-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10002;
	background: rgba(245, 245, 247, 0.6);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	overflow-y: auto;
	padding: 20px;
	-webkit-overflow-scrolling: touch;
}
.rbss-overlay.is-open { display: flex; align-items: center; justify-content: center; }

@media only screen and (min-width: 1150px) {
	.rbss-overlay { padding: 20px 15%; }
}

.rbss-overlay-modal {
	position: relative;
	width: 100%;
	max-height: 80vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
	padding: 40px 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 40px;
	font-family: var(--rbss-font);
	color: #1d1d1f;
	text-align: left;
}
@media only screen and (min-width: 1150px) {
	.rbss-overlay-modal { padding: 40px; }
}

.rbss-overlay-close {
	flex: none;
	width: 25px;
	height: 29px;
	padding: 0;
	border: 0;
	background: url(/site/cs/images/rocky/overlay-close.svg) no-repeat center;
	background-size: 17px 21px;
	font-size: 0;
	cursor: pointer;
}
.rbss-overlay-close:hover { opacity: 0.7; }

.rbss-form-prompt,
.rbss-thank-you { width: 100%; }

/* ── Typography (form-heading / form-subheading) ─────────────────────────── */

.rbss-h {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.05em;
	color: #1d1d1f;
	margin: 0 0 8px;
}

.rbss-sub {
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.05em;
	color: #1d1d1f;
	margin: 0 0 40px;
}

/* Modal body — three paragraphs, gap before the fields. */
.rbss-body { margin: 0 0 40px; }
.rbss-body p {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.05em;
	color: #1d1d1f;
	margin: 0 0 16px;
}
.rbss-body p:last-child { margin-bottom: 0; }

/* ── Fields (two-column: gap-x-4 / gap-y-2.5) ────────────────────────────── */

.rbss-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 16px;
	row-gap: 10px;
	margin-bottom: 10px;
}

.rbss-field { display: flex; flex-direction: column; min-width: 0; }

.rbss-field label {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: #1d1d1f;
	margin-bottom: 8px;
}
.rbss-req { color: inherit; }

.rbss-field input,
.rbss-field select {
	width: 100%;
	height: 54px;
	padding: 16px;
	background: #f5f5f7;
	border: 0;
	border-radius: 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: var(--rbss-font);
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.05em;
	color: #1d1d1f;
}
.rbss-field input::placeholder { color: #767676; }
.rbss-field select:invalid { color: #767676; }

.rbss-field input:focus,
.rbss-field select:focus {
	outline: none;
	box-shadow: 0 0 0 2px #2f54e5;
}

/* Inline validation (matches v2: red field + message below) */
.rbss-field input.rbss-input-error,
.rbss-field select.rbss-input-error {
	box-shadow: 0 0 0 1px #e9152e;
}
.rbss-error-msg {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.3;
	color: #e9152e;
}

.rbss-field select {
	padding-right: 44px;
	line-height: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 64 38'%3E%3Cpath d='M29.9 34.97L1.57 5.99A3.8 3.8 0 0 1 .3 3.8C.3 2.03 1.66.67 3.44.67c.86 0 1.63.37 2.19.9L29.9 28.2 56.37 1.57a3.1 3.1 0 0 1 2.19-.9c1.77 0 3.1 1.37 3.1 3.14 0 .87-.35 1.62-.92 2.19L31.71 34.97c-.62.67-1.39.99-1.8.99-.4 0-1.17-.32-1.8-.99z' fill='%231d1d1f'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.rbss-hp { position: absolute !important; left: -9999px; height: 0; opacity: 0; }

/* ── Privacy (form-body, mt-4 mb-6) + submit (PrimaryButton md) ──────────── */

/* ── Opt-in (GDPR marketing consent — mirrors v2) + privacy + submit ─────── */

.rbss-optin { margin: 16px 0 0; }
.rbss-optin-label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}
.rbss-optin-check { margin-top: 4px; flex: none; }
.rbss-optin-label span {
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: -0.05em;
	color: #1d1d1f;
}

.rbss-privacy {
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: -0.05em;
	color: #1d1d1f;
	margin: 16px 0 24px;
}
.rbss-privacy a { color: #2f54e5; text-decoration: underline; }

.rbss-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--rbss-font);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -0.05em;
	line-height: 1;
	color: #fff;
	background: linear-gradient(108.41deg, #2f54e5 -3.19%, #5b7cff 103.42%);
	border: 0;
	border-radius: 9999px;
	padding: 12px 16px;
	cursor: pointer;
}
.rbss-submit:hover { opacity: 0.9; }
.rbss-submit[disabled] { opacity: 0.5; cursor: default; }

.rbss-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	display: none;
}
.rbss-submit.is-loading .rbss-spinner { display: inline-block; animation: rbss-spin 0.7s linear infinite; }
@keyframes rbss-spin { to { transform: rotate(360deg); } }

.rbss-error { color: #e9152e; font-size: 16px; margin: 12px 0 0; }

/* ── Thank-you (ContactFormSuccess: heading mb-5 + message) ──────────────── */

.rbss-thank-you .rbss-h { margin-bottom: 20px; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media only screen and (max-width: 734px) {
	.rbss-row { grid-template-columns: 1fr; column-gap: 0; }
	.rbss-h { font-size: 24px; }
	.rbss-sub { font-size: 18px; }
}