/**
 * Shared styles — compliance footer + trigger-button variants + other
 * reusable blocks rendered across multiple widgets. Enqueued globally so
 * every widget renders consistently without each per-widget CSS file
 * having to re-declare the same rules.
 */

/* ── TRIGGER BUTTON VARIANTS ───────────────────────────────────────
   Used by every widget that opens a modal (Find My Rate, Schedule a
   Call, Refinance). The base class is the BLACK GHOST (default for
   light backgrounds). Two modifier classes flip to other looks:
     .mms-trigger-btn--white  → white ghost (for dark backgrounds)
     .mms-trigger-btn--solid  → solid blue fill (for emphasis on light)
   The widget's "Button style" dropdown maps to which modifier (if any)
   gets applied at render time.
─────────────────────────────────────────────────────────────────── */
.mms-trigger-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	line-height: 1;
	cursor: pointer;
	border-radius: 9999px !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: #000 !important;
	background-color: transparent !important;
	color: #000 !important;
	text-decoration: none !important;
	transition: all 0.3s, transform 0.4s;
}
.mms-trigger-btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	stroke: #000;
}
.mms-trigger-btn:hover {
	background-color: rgba(0, 0, 0, 0.05) !important;
	transform: translateX(7px);
	filter: brightness(95%);
}

/* White ghost — for dark backgrounds */
.mms-trigger-btn--white {
	border-color: #fff !important;
	color: #fff !important;
}
.mms-trigger-btn--white svg { stroke: #fff !important; }
.mms-trigger-btn--white:hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
	color: #fff !important;
}

/* Solid blue — primary CTA emphasis */
.mms-trigger-btn--solid {
	background-color: var(--mms-p, #1e3295) !important;
	border-color: var(--mms-p, #1e3295) !important;
	color: #fff !important;
}
.mms-trigger-btn--solid svg { stroke: #fff !important; }
.mms-trigger-btn--solid:hover {
	background-color: var(--mms-pdk, #171e3b) !important;
	border-color: var(--mms-pdk, #171e3b) !important;
	color: #fff !important;
}

/* Responsive: kill the translateX hover at narrow widths so a
   full-width trigger button can't push outside its column and create
   horizontal scroll. Replace with brightness tap feedback. */
@media (max-width: 768px) {
	.mms-trigger-btn:hover,
	.mms-trigger-btn--white:hover,
	.mms-trigger-btn--solid:hover { transform: none; }
	.mms-trigger-btn:active,
	.mms-trigger-btn--white:active,
	.mms-trigger-btn--solid:active { filter: brightness(88%); }
}
@media (max-width: 480px) {
	.mms-trigger-btn { padding: 14px 20px; font-size: 15px !important; }
}

/* When the widget's alignment control is set to "stretch", the wrapper
   becomes display:block (via selectors_dictionary) so the trigger anchor's
   parent fills width. The anchor itself is inline-flex by default, so we
   also need to flip it to flex + 100% here.

   The alignment control uses prefix_class 'mms-align%s-' which generates
   per-breakpoint classes (Elementor substitutes %s with '', '-tablet', or
   '-mobile' depending on which breakpoint the value was set at). We mirror
   that with media-queried rules so stretch picked at a specific breakpoint
   only stretches at that viewport, and non-stretch picked at a smaller
   breakpoint correctly undoes a desktop stretch.

   Breakpoints below match Elementor's defaults — if those get changed in
   Site Settings, these need to follow. */
.mms-align-stretch .mms-trigger-btn {
	display: flex;
	width: 100%;
}

@media (max-width: 1024px) {
	.mms-align-tablet-stretch .mms-trigger-btn {
		display: flex;
		width: 100%;
	}
	.mms-align-tablet-flex-start .mms-trigger-btn,
	.mms-align-tablet-center .mms-trigger-btn,
	.mms-align-tablet-flex-end .mms-trigger-btn {
		display: inline-flex;
		width: auto;
	}
}

@media (max-width: 767px) {
	.mms-align-mobile-stretch .mms-trigger-btn {
		display: flex;
		width: 100%;
	}
	.mms-align-mobile-flex-start .mms-trigger-btn,
	.mms-align-mobile-center .mms-trigger-btn,
	.mms-align-mobile-flex-end .mms-trigger-btn {
		display: inline-flex;
		width: auto;
	}
}

.mms-compliance-footer {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid #e5e7eb;
	font-family: 'DM Sans', sans-serif;
	color: #6b7280;
	font-size: 0.72rem;
	line-height: 1.55;
}
.mms-compliance-footer p {
	margin: 0 0 8px 0;
	padding: 0;
}
.mms-compliance-footer p:last-child {
	margin-bottom: 0;
}
.mms-compliance-footer a {
	color: var(--mms-p, #1e3295);
	text-decoration: underline;
}
.mms-compliance-footer .mms-compliance-nmls {
	font-weight: 600;
	color: #4b5563;
}
.mms-compliance-footer .mms-compliance-eho strong {
	color: #4b5563;
	font-weight: 700;
}

/* Inside a modal: tighter, white-text variant on dark backgrounds.
   Triggered when the footer is rendered inside a .mms-modal-compliance
   wrapper which a modal can apply to flip the look. */
.mms-modal-compliance .mms-compliance-footer {
	border-top-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.7);
}
.mms-modal-compliance .mms-compliance-footer .mms-compliance-nmls,
.mms-modal-compliance .mms-compliance-footer .mms-compliance-eho strong {
	color: rgba(255, 255, 255, 0.85);
}
.mms-modal-compliance .mms-compliance-footer a {
	color: #fff;
}

/* TCPA consent block — used by every widget that captures a phone. */
.mms-consent-wrap {
	background: #f3f4f6;
	border-radius: 12px;
	padding: 14px 16px;
	margin: 14px 0 8px;
}
.mms-consent-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-family: 'DM Sans', sans-serif;
	/* Override form-label inheritance — the host form's `label` rule
	   sets uppercase/bold/letter-spacing which made the consent block
	   render as ugly blocky caps. Force the consent label back to a
	   neutral state so .mms-consent-text controls the look. */
	text-transform: none !important;
	letter-spacing: normal !important;
	font-weight: 400 !important;
	margin-bottom: 0 !important;
	color: inherit;
}
.mms-consent-label input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.mms-consent-box {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	/* Vertically center the box with the first line of consent text.
	   Consent text is ~11.5px / line-height 1.5 (~17px line). With an
	   18px box, a tiny negative top margin lifts the box's center up
	   to match the first line's center. */
	align-self: flex-start;
	margin-top: -1px;
	border: 2px solid #d1d5db;
	border-radius: 4px;
	background: white;
	transition: all 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mms-consent-box svg {
	width: 12px;
	height: 12px;
	color: white;
	display: none;
}
.mms-consent-label.checked .mms-consent-box {
	background: var(--mms-p, #1e3295);
	border-color: var(--mms-p, #1e3295);
}
.mms-consent-label.checked .mms-consent-box svg { display: block; }

/* ============================================================
   Generic inline field error message + .has-error input state.
   Shared across every multi-step widget. Show on the input that
   failed validation (e.g. invalid email, bad ZIP). Pairs with
   JS toggling `[hidden]` on the error span + `.has-error` on
   the input.
   ============================================================ */
.field-error {
	display: block;
	margin-top: 6px;
	font-size: 0.75rem;
	color: #dc2626;
	line-height: 1.4;
}
.field-error[hidden] { display: none; }

/* ============================================================
   State-specific disclosure block (geo-aware). Server-side renders
   all three with [hidden]; the inline JS in render_state_disclosures()
   reveals only the one matching the visitor's detected US state.
   ============================================================ */
.mms-state-disclosures {
	margin-top: 8px;
}
.mms-state-disclosure {
	margin: 0 0 6px;
	font-size: 0.78rem;
	line-height: 1.5;
	color: #6b7280;
	font-style: italic;
}
.mms-state-disclosure[hidden] { display: none; }
input.has-error,
select.has-error {
	border-color: #dc2626 !important;
}
input.has-error:focus,
select.has-error:focus {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}
.mms-consent-text {
	/* Match the .disclaimer text style (small, light gray, tight line-
	   height) but explicitly not italic — same look as the reassurance
	   line above the consent checkbox in the contact form. */
	font-size: 0.72rem;
	font-weight: 400;
	color: #9ca3af;
	line-height: 1.5;
	font-style: normal;
	text-transform: none;
	letter-spacing: normal;
}
.mms-consent-text a {
	color: var(--mms-p, #1e3295);
	text-decoration: underline;
}

/* Brief shake to draw attention when user clicks Submit without
   accepting consent. Plays once via a JS class toggle. */
.mms-consent-needs-attention {
	animation: mmsConsentShake 0.45s cubic-bezier(.36,.07,.19,.97) both;
}
.mms-consent-needs-attention .mms-consent-box {
	border-color: #dc2626;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
@keyframes mmsConsentShake {
	10%, 90% { transform: translate3d(-1px, 0, 0); }
	20%, 80% { transform: translate3d(2px, 0, 0); }
	30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
	40%, 60% { transform: translate3d(3px, 0, 0); }
}