/* SMS opt-in disclaimer block — Fluent Forms (client-injected) and Gravity
   Forms (native field, marked with the same tmb-sms-optin-field class on its
   .gfield wrapper) share this look so the two engines read consistently.

   THEME-AGNOSTIC BY DESIGN: every color here is derived from the form's own
   text color via `currentColor` / `inherit` and translucent overlays. The
   block must be legible on a white card (Toucan) AND on a dark brand panel
   (experigreen.com's green quote form) without per-site overrides — a
   hardcoded #555 on a dark green panel was unreadable. Never hardcode a
   text or border color in this file. */

.tmb-sms-optin-block,
.gfield.tmb-sms-optin-field {
	box-sizing: border-box;
	width: 100%;
	margin: 16px 0 14px;
	padding: 12px 14px;
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 22%, transparent);
	border-radius: 6px;
	background: color-mix(in srgb, currentColor 6%, transparent);
	color: inherit;
	clear: both;
}

/* Fallback for browsers without color-mix(): keep a subtle, neutral look
   that still inherits the text color (border/bg use opacity, not a hue). */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.tmb-sms-optin-block,
	.gfield.tmb-sms-optin-field {
		border-color: rgba(127, 127, 127, 0.35);
		background: rgba(127, 127, 127, 0.08);
	}
}

/* GF renders every checkbox field's fieldset with a visible <legend>
   ("SMS Opt-In") above it, like a section heading — Fluent Forms has no
   equivalent element, so the two engines read inconsistently and the
   legend reads as redundant noise above the disclaimer. Clip it visually
   (not display:none) so the fieldset keeps its accessible group name for
   screen readers while sighted users only see the disclaimer + checkbox. */
.gfield.tmb-sms-optin-field .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* THEME-PROOF TYPOGRAPHY — the !important flags below are deliberate.
   The block is injected into whatever container a site dropped its form
   into, and theme/page-builder "Custom CSS" routinely carries ID-scoped
   type rules for that container — e.g. The7's theme-options CSS on
   mrwlawns.com, mightygreen.com and healthylawn.net has
   `#quote-form-row p { font-size: 32px; font-weight: 500; line-height: 36px }`,
   which beats ANY class selector we can write (ID specificity) and rendered
   the disclaimer as 32px hero text. Only the type scale is forced; colors
   stay inherited per the rule above. Do not remove the !important flags.

   The `:not(#tmb-sms-noop)` suffix is a specificity boost, not a real id:
   `:not()` takes the specificity of its argument, so each selector gains
   ID-level weight (universally supported, unlike :is()). That covers the
   next case up — theme rules that are ALSO !important, e.g. Salient's
   `#hero p { font-size: 25px !important }` on fairwaygreen.com — where
   !important alone would tie and the theme's ID selector would win. */
.tmb-sms-optin-block .tmb-sms-optin-disclaimer:not(#tmb-sms-noop),
.gfield.tmb-sms-optin-field .gfield_description:not(#tmb-sms-noop) {
	margin: 0 0 10px !important;
	padding: 0 !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.5 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: inherit;
	opacity: 0.9;
	text-align: left;
}

.tmb-sms-optin-block .tmb-sms-optin-disclaimer a:not(#tmb-sms-noop),
.gfield.tmb-sms-optin-field .gfield_description a:not(#tmb-sms-noop) {
	color: inherit;
	text-decoration: underline;
	font-size: inherit !important;
	font-weight: 600 !important;
	line-height: inherit !important;
}

.tmb-sms-optin-block .tmb-sms-optin-choice:not(#tmb-sms-noop) {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: inherit;
	cursor: pointer;
	text-align: left;
}

.tmb-sms-optin-choice input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: currentColor;
}

.tmb-sms-optin-block .tmb-sms-optin-choice span:not(#tmb-sms-noop) {
	color: inherit;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}