/**
 * Jumbo Pre-Qualification widget styles.
 *
 * Same modal shape as Find My Rate, scoped to .mms-jumbo so the two widgets
 * can coexist on the same page without selector collisions.
 *
 * Tokenized: brand colors come from --mms-{token} with hex fallbacks inline
 * so the modal still renders correctly even before the plugin's :root style
 * block resolves (e.g. in Elementor's editor preview before wp_head fires).
 *
 * Neutral grays (n50–n800) stay hardcoded — they're not brand-locked and
 * exposing them in plugin settings would clutter the UI for an override
 * nobody's likely to want.
 */

/* ── ISOLATION RESET ─────────────────────────────────────────────── */
.mms-jumbo, .mms-jumbo *, .mms-jumbo *::before, .mms-jumbo *::after {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
.mms-jumbo .step-title,.mms-jumbo .success-title,.mms-jumbo .mms-jumbo-card-title {
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 700; line-height: 1.2;
	margin: 0; padding: 0; border: none; background: none;
	color: #1f2937; letter-spacing: -0.01em;
}
.mms-jumbo p,.mms-jumbo ul,.mms-jumbo ol,.mms-jumbo li {
	margin: 0; padding: 0; list-style: none;
	font-family: 'DM Sans', sans-serif !important;
}
.mms-jumbo a { text-decoration: none; color: inherit; }
.mms-jumbo input,.mms-jumbo select,.mms-jumbo button,.mms-jumbo textarea {
	font-family: 'DM Sans', sans-serif !important;
	-webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0;
}
.mms-jumbo input[type="number"]::-webkit-inner-spin-button,
.mms-jumbo input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── ROOT (full-screen overlay) ──────────────────────────────────── */
.mms-jumbo {
	font-family: 'DM Sans', sans-serif !important;
	font-size: 16px; line-height: 1.5; color: #1f2937;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 999999;
	display: flex; align-items: center; justify-content: center; padding: 16px;

	/* Local fallbacks — match the design-system defaults so the modal
	   renders correctly even before the plugin :root vars resolve. */
	--p:    var(--mms-p,   #1e3295);
	--pdk:  var(--mms-pdk, #171e3b);
	--sec:  var(--mms-sec, #0ea5c9);
	--p50:  #eff6ff;
	--p100: #dbeafe;
	--n50:  #f9fafb; --n100: #f3f4f6; --n200: #e5e7eb;
	--n300: #d1d5db; --n400: #9ca3af; --n500: #6b7280;
	--n600: #4b5563; --n700: #374151; --n800: #1f2937;

	animation: mmsFadeIn 0.2s ease;
}
@keyframes mmsFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── SIMPLE INTRO CARD ───────────────────────────────────────────── */
/* Re-scoped from the source HTML's .mms-jumbo rules (which doubled as
   the card root). We use .mms-jumbo-card so the plugin's .mms-jumbo
   (modal overlay) doesn't collide. */
.mms-jumbo-card, .mms-jumbo-card *, .mms-jumbo-card *::before, .mms-jumbo-card *::after {
	box-sizing: border-box; -webkit-font-smoothing: antialiased;
	font-family: 'DM Sans', sans-serif !important;
	margin: 0; padding: 0;
}
.mms-jumbo-card {
	background: #ffffff;
	border: 1px solid rgba(23,30,59,0.06);
	border-radius: 15px;
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.08), 0 0 0 1px rgba(23,30,59,0.04);
	padding: 36px;
	max-width: 440px;
	width: 100%;
	--p:   var(--mms-p,   #1e3295);
	--pdk: var(--mms-pdk, #171e3b);
	--sec: var(--mms-sec, #0ea5c9);
}
.mms-jumbo-card .mms-jumbo-card-title {
	font-size: 1.5rem; font-weight: 800; color: #171E3B; margin-bottom: 24px;
	letter-spacing: -0.02em; line-height: 1.2;
}
.mms-jumbo-card .field { margin-bottom: 16px; }
.mms-jumbo-card label {
	display: block; font-size: 0.78rem; font-weight: 700; color: #4b5563;
	margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.03em;
}
.mms-jumbo-card input[type="text"],
.mms-jumbo-card select {
	width: 100%; padding: 14px 16px;
	border: 1.5px solid #e5e7eb; border-radius: 999px;
	font-size: 0.95rem; color: #171E3B; background: #fff;
	outline: none; transition: border-color 0.2s, box-shadow 0.2s;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	line-height: 1.4;
}
.mms-jumbo-card input::placeholder { color: #9ca3af; }
.mms-jumbo-card input:focus,
.mms-jumbo-card select:focus {
	border-color: var(--p);
	box-shadow: 0 0 0 3px rgba(30,50,149,0.1);
}
.mms-jumbo-card .select-wrap { position: relative; }
.mms-jumbo-card .select-wrap::after {
	content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
	width: 0; height: 0;
	border-left: 5px solid transparent; border-right: 5px solid transparent;
	border-top: 6px solid #9ca3af;
	pointer-events: none;
}
.mms-jumbo-card .select-wrap select { padding-right: 40px; cursor: pointer; }
.mms-jumbo-card .btn-submit {
	display: block; width: 100%; padding: 16px; margin-top: 24px;
	border: none; border-radius: 999px; cursor: pointer;
	background: linear-gradient(135deg, var(--p), var(--pdk));
	color: #fff; font-size: 1rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0;
	font-family: 'DM Sans', sans-serif !important;
	transition: all 0.3s, transform 0.4s;
	box-shadow: 0 4px 14px rgba(23,30,59,0.2);
	line-height: 1;
}
.mms-jumbo-card .btn-submit:hover {
	transform: translateX(7px);
	filter: brightness(95%);
	box-shadow: 0 6px 20px rgba(23,30,59,0.3);
}
.mms-jumbo-card .disclaimer {
	font-size: 0.75rem; color: #9ca3af; text-align: center;
	margin-top: 16px; line-height: 1.5;
}
@media (max-width: 480px) {
	.mms-jumbo-card { padding: 24px 20px; }
	.mms-jumbo-card .btn-submit:hover { transform: none; }
	.mms-jumbo-card .btn-submit:active { filter: brightness(88%); }
}

/* ── MODAL ───────────────────────────────────────────────────────── */
.mms-jumbo .modal {
	background: white;
	border-radius: 15px;
	box-shadow: 0 25px 60px rgba(0,0,0,0.2);
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 32px);
	display: flex;
	flex-direction: column;
	animation: mmsSlideIn 0.3s ease;
	overflow: hidden;
	position: relative;
}
.mms-jumbo .modal-body   { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.mms-jumbo .modal-footer { flex: 0 0 auto; }

/* Inline success-screen close button — pinned to top-right of the
   modal so it's a clear affordance after submission. */
.mms-jumbo .success-screen { position: relative; }
.mms-jumbo .success-close-btn {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: none;
	background: rgba(23,30,59,0.05);
	color: #6b7280;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	padding: 0;
	z-index: 2;
}
.mms-jumbo .success-close-btn:hover,
.mms-jumbo .success-close-btn:focus {
	background: rgba(23,30,59,0.12);
	color: #171E3B;
	outline: none;
}
@keyframes mmsSlideIn { from { opacity:0; transform: translateY(20px) scale(0.98); } to { opacity:1; transform: translateY(0) scale(1); } }

.mms-jumbo .close-btn {
	position: absolute; top: 16px; right: 16px; width: 36px; height: 36px;
	border-radius: 50%; border: none; background: transparent; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	color: var(--n400); transition: background 0.15s; z-index: 10;
}
.mms-jumbo .close-btn:hover { background: var(--n100); color: var(--n700); }

.mms-jumbo .modal-body { padding: 32px 40px 24px; }
@media (max-width: 480px) { .mms-jumbo .modal-body { padding: 24px 20px 16px; } }

/* ── PROGRESS ────────────────────────────────────────────────────── */
.mms-jumbo .progress-wrap { margin-bottom: 28px; }
.mms-jumbo .progress-labels { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 8px; }
.mms-jumbo .progress-labels span:first-child { color: var(--n500); }
.mms-jumbo .progress-labels span:last-child { color: var(--n700); font-weight: 600; }
.mms-jumbo .progress-track { height: 8px; background: var(--n100); border-radius: 99px; overflow: hidden; }
.mms-jumbo .progress-bar { height: 100%; background: linear-gradient(to right, var(--p), var(--sec)); border-radius: 99px; transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }

/* ── STEP HEADER ─────────────────────────────────────────────────── */
.mms-jumbo .step-header { text-align: center; margin-bottom: 28px; }
.mms-jumbo .step-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--p100), #cffafe); border-radius: 15px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.mms-jumbo .step-icon svg { width: 30px; height: 30px; color: var(--p); }
.mms-jumbo .step-header .step-title { font-size: 1.7rem; font-weight: 700; color: var(--n800); margin-bottom: 6px; font-family: 'DM Sans', sans-serif !important; }
.mms-jumbo .step-header p { font-size: 0.95rem; color: var(--n500); line-height: 1.5; }

/* ── OPTIONS ─────────────────────────────────────────────────────── */
.mms-jumbo .options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.mms-jumbo .option-label { display: block; padding: 14px 16px; border: 2px solid var(--n200); border-radius: 15px; cursor: pointer; transition: all 0.15s; background: white; }
.mms-jumbo .option-label:hover { border-color: var(--n300); background: var(--n50); }
.mms-jumbo .option-label.selected { border-color: var(--p); background: var(--p50); }
.mms-jumbo .option-inner { display: flex; align-items: center; gap: 14px; }
.mms-jumbo .option-icon { width: 42px; height: 42px; border-radius: 15px; background: var(--n100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; }
.mms-jumbo .option-label.selected .option-icon { background: var(--p100); }
.mms-jumbo .option-icon svg { width: 20px; height: 20px; color: var(--n500); }
.mms-jumbo .option-label.selected .option-icon svg { color: var(--p); }
.mms-jumbo .option-text { flex: 1; }
.mms-jumbo .option-title { font-size: 0.95rem; font-weight: 600; color: var(--n800); }
.mms-jumbo .option-desc { font-size: 0.82rem; color: var(--n500); margin-top: 2px; }
.mms-jumbo .option-radio-dot { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 2px solid #d1d5db; background: white; transition: all 0.15s; }
.mms-jumbo .option-radio-dot.checked { border-color: var(--p); background: var(--p); box-shadow: inset 0 0 0 3px white; }

/* ── INPUT FIELDS ────────────────────────────────────────────────── */
.mms-jumbo .input-group { margin-bottom: 16px; }
.mms-jumbo .input-group label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--n600); margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.04em; font-family: 'DM Sans', sans-serif !important; }
.mms-jumbo .input-wrap { position: relative; }
.mms-jumbo .input-prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--n400); font-weight: 500; font-size: 0.95rem; pointer-events: none; }
.mms-jumbo .input-wrap input,
.mms-jumbo .input-group input,
.mms-jumbo .input-group select {
	width: 100%; padding: 12px 14px; border: 2px solid var(--n200); border-radius: 15px;
	font-family: 'DM Sans', sans-serif !important; font-size: 0.95rem; color: var(--n800);
	outline: none; transition: border-color 0.15s, box-shadow 0.15s; background: white; line-height: 1.4;
}
.mms-jumbo .input-wrap input { padding-left: 30px; }
.mms-jumbo .input-group input:focus,
.mms-jumbo .input-group select:focus,
.mms-jumbo .input-wrap input:focus { border-color: var(--p); box-shadow: 0 0 0 3px rgba(30, 50, 149, 0.1); }
.mms-jumbo .input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 400px) { .mms-jumbo .input-row { grid-template-columns: 1fr; } }


/* ── SUCCESS ─────────────────────────────────────────────────────── */
.mms-jumbo .success-screen { text-align: center; padding: 16px 0 8px; }
.mms-jumbo .success-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #d1fae5, #a7f3d0); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.mms-jumbo .success-icon svg { width: 36px; height: 36px; color: #059669; }
.mms-jumbo .success-screen .success-title { font-size: 1.8rem; font-weight: 700; color: var(--n800); margin-bottom: 10px; font-family: 'DM Sans', sans-serif !important; }
.mms-jumbo .success-screen p { font-size: 0.95rem; color: var(--n500); line-height: 1.6; max-width: 380px; margin: 0 auto 24px; }
.mms-jumbo .success-details { background: var(--n50); border: 1px solid var(--n200); border-radius: 15px; padding: 18px 20px; text-align: left; margin-bottom: 20px; }
.mms-jumbo .detail-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--n100); font-size: 0.85rem; }
.mms-jumbo .detail-row:last-child { border-bottom: none; }
.mms-jumbo .detail-row span { color: var(--n500); }
.mms-jumbo .detail-row strong { color: var(--n800); font-weight: 600; }

/* ── FOOTER NAV ──────────────────────────────────────────────────── */
.mms-jumbo .modal-footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 40px 28px; }
@media (max-width: 480px) { .mms-jumbo .modal-footer { padding: 12px 20px 20px; } }

.mms-jumbo .btn-back { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border: none; background: transparent; font-family: 'DM Sans', sans-serif !important; font-size: 0.95rem; font-weight: 600; color: var(--n600); cursor: pointer; border-radius: 15px; transition: all 0.15s; line-height: 1; }
.mms-jumbo .btn-back:hover:not(:disabled) { background: var(--n100); color: var(--n800); }
.mms-jumbo .btn-back:disabled { opacity: 0.4; cursor: not-allowed; }

.mms-jumbo .btn-next { display: flex; align-items: center; gap: 8px; padding: 12px 28px; border: none; background: linear-gradient(to right, var(--p), var(--pdk)); color: white; font-family: 'DM Sans', sans-serif !important; font-size: 0.95rem; font-weight: 700; border-radius: 15px; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 14px rgba(23, 30, 59, 0.2); line-height: 1; }
.mms-jumbo .btn-next:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(23, 30, 59, 0.3); }
.mms-jumbo .btn-next:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.mms-jumbo .step-content { animation: mmsFadeSlide 0.25s ease; }
@keyframes mmsFadeSlide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }

/* ── MULTI-SELECT CHECKBOX OPTIONS (refinance goal step) ─────────── */
.mms-jumbo .option-checkbox .option-check-box {
	width: 22px; height: 22px; flex-shrink: 0;
	border: 2px solid #d1d5db; border-radius: 6px; background: white;
	display: flex; align-items: center; justify-content: center;
	transition: all 0.15s; color: transparent;
}
.mms-jumbo .option-checkbox .option-check-box svg { width: 14px; height: 14px; }
.mms-jumbo .option-checkbox.selected .option-check-box,
.mms-jumbo .option-checkbox .option-check-box.checked {
	border-color: var(--p); background: var(--p); color: white;
}

/* ── INPUT SUFFIX (% on rate / down-payment percentage) ───────────── */
.mms-jumbo .input-wrap-suffix .input-suffix {
	position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
	color: var(--n400); font-weight: 500; font-size: 0.95rem; pointer-events: none;
}
.mms-jumbo .input-wrap-suffix input { padding-right: 40px; padding-left: 18px; }

/* ── PROPERTY ADDRESS ROW (city / state / ZIP three-up) ───────────── */
.mms-jumbo .input-row-address { grid-template-columns: 2fr 1.2fr 1fr; }
@media (max-width: 600px) { .mms-jumbo .input-row-address { grid-template-columns: 1fr; } }

/* ── DISCLOSURE (credit score "won't affect your credit" notice) ──── */
.mms-jumbo .mms-disclosure {
	display: flex; align-items: center; gap: 10px;
	margin-top: 12px;
	padding: 12px 14px;
	background: var(--p50);
	border-radius: 12px;
	font-size: 0.85rem; color: var(--p);
	font-weight: 500;
}
.mms-jumbo .mms-disclosure svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Estimate disclaimer — small italic block below step content. Always
   visible on input steps so users see the "not an offer to lend" language
   at every interaction with the calculator. Hidden on success by JS. */
.mms-jumbo .mms-jumbo-estimate-disclaimer {
	margin-top: 18px;
	padding: 12px 14px;
	background: var(--n50);
	border-radius: 10px;
	font-size: 0.72rem;
	font-style: italic;
	color: var(--n500);
	line-height: 1.5;
}