/* ==========================================================================
   Innovexify Multi Step Form — Frontend Styles
   Design tokens:
     Ink navy     #131B3A   (text, buttons, progress line)
     Paper        #FAFAFC   (form surface)
     Line grey    #D7D9E4   (borders)
     Muted grey   #8A8FA3   (placeholders, help text)
     Gold accent  #D4A54A   (progress fill, price highlight, focus)
   Signature element: the horizontal "quote journey" progress track —
   numbered nodes connected by a line that fills gold as steps complete.
   ========================================================================== */

.imsf-form-wrap {
	--imsf-ink: #131B3A;
	--imsf-paper: #FAFAFC;
	--imsf-line: #D7D9E4;
	--imsf-muted: #8A8FA3;
	--imsf-gold: #D4A54A;

	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	background: var(--imsf-paper);
	border: 1px solid var(--imsf-line);
	border-radius: 16px;
	padding: 32px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
	color: var(--imsf-ink);
	/* Guards against the surrounding theme placing this in a flex or
	   grid layout, where a plain width:100% can otherwise be silently
	   overridden by shrink-to-fit sizing - which is what would make the
	   whole container appear to change width depending on which step's
	   content is currently visible, even though nothing here actually
	   changes the wrap's own CSS width. */
	flex-shrink: 0;
	align-self: stretch;
}
.imsf-form-wrap *, .imsf-form-wrap *::before, .imsf-form-wrap *::after { box-sizing: border-box; }

/* ---- Progress track (signature element) ---- */
.imsf-progress {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 32px;
	position: relative;
}
.imsf-progress::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 5%;
	right: 5%;
	height: 2px;
	background: var(--imsf-line);
	z-index: 0;
}
.imsf-progress-step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	text-align: center;
	gap: 8px;
}
.imsf-progress-node {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--imsf-line);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--imsf-muted);
	transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.imsf-progress-node.is-active { border-color: var(--imsf-gold); color: #fff; background: var(--imsf-gold); transform: scale(1.1); }
.imsf-progress-node.is-done { border-color: var(--imsf-gold); color: #fff; background: var(--imsf-gold); }
.imsf-progress-label { font-size: 12px; color: var(--imsf-muted); max-width: 90px; }
.imsf-progress-step[data-step-index] .imsf-progress-node.is-active ~ .imsf-progress-label,
.imsf-progress-step .imsf-progress-node.is-active + .imsf-progress-label { color: var(--imsf-ink); font-weight: 600; }

/* ---- Steps ---- */
.imsf-step { animation: imsf-fade-in .35s ease; width: 100%; box-sizing: border-box; }
@keyframes imsf-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
.imsf-step-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.imsf-step-description { margin: 0 0 20px; color: var(--imsf-muted); font-size: 14px; }

.imsf-fields-row { display: flex; flex-wrap: wrap; gap: 0 16px; width: 100%; box-sizing: border-box; }
.imsf-field { display: flex; flex-direction: column; }
.imsf-label { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.imsf-required { color: #C0392B; }
.imsf-help { font-size: 12px; color: var(--imsf-muted); margin: 4px 0 0; }
.imsf-field-error { font-size: 12px; color: #C0392B; margin-top: 4px; display: none; }
.imsf-field.has-error .imsf-field-error { display: block; }
.imsf-field.has-error input,
.imsf-field.has-error textarea,
.imsf-field.has-error .imsf-select-trigger { border-color: #C0392B !important; }

.imsf-field input,
.imsf-field textarea,
.imsf-select-trigger {
	width: 100%;
	border-style: solid;
	font-family: inherit;
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease;
	background: #fff;
}
.imsf-field input:focus,
.imsf-field textarea:focus,
.imsf-select-trigger:focus-visible {
	border-color: var(--imsf-gold);
	box-shadow: 0 0 0 3px rgba(212,165,74,.18);
}
.imsf-field textarea { min-height: 96px; resize: vertical; }

/* ---- Custom dropdown with smart direction ---- */
.imsf-select { position: relative; }
.imsf-select-trigger { text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.imsf-select-trigger::after { content: "▾"; color: var(--imsf-muted); margin-left: 8px; flex-shrink: 0; }
.imsf-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.imsf-select-panel {
	position: absolute;
	left: 0; right: 0;
	top: calc(100% + 6px);
	background: #fff;
	border: 1px solid var(--imsf-line);
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(19,27,58,.12);
	max-height: 300px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 60;
	display: none;
	padding: 6px;
}
.imsf-select.is-open .imsf-select-panel { display: block; }
.imsf-select.direction-up .imsf-select-panel { top: auto; bottom: calc(100% + 6px); }

/* Defensive: nothing between the dropdown and the form's outer edge is
   allowed to clip it. An open panel is meant to float over whatever is
   below it (nav buttons, total bar), never get cut off by it. */
.imsf-form-wrap, .imsf-step, .imsf-fields-row, .imsf-field, .imsf-select {
	overflow: visible;
}
.imsf-select-option { padding: 10px 12px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.imsf-select-option:hover, .imsf-select-option.is-active { background: #F7F3EA; }

/* ---- Plan / radio option cards with hover tooltip ---- */
.imsf-option-cards { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
.imsf-option-card {
	position: relative;
	flex: 1 1 160px;
	border: 1.5px solid var(--imsf-line);
	border-radius: 12px;
	padding: 16px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 4px;
	transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.imsf-option-card input { position: absolute; opacity: 0; pointer-events: none; }
.imsf-option-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(19,27,58,.08); }
.imsf-option-card:has(input:checked) { border-color: var(--imsf-gold); box-shadow: 0 0 0 3px rgba(212,165,74,.15); }
.imsf-option-card-label { font-weight: 600; font-size: 15px; }
.imsf-option-card-price { color: var(--imsf-gold); font-weight: 700; font-size: 14px; }
.imsf-option-tooltip {
	position: absolute;
	left: 0; right: 0;
	bottom: calc(100% + 10px);
	background: var(--imsf-ink);
	color: #fff;
	border-radius: 10px;
	padding: 14px;
	font-size: 12px;
	line-height: 1.5;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease;
	z-index: 30;
	pointer-events: none;
}
.imsf-option-tooltip p { margin: 0 0 6px; font-weight: 600; }
.imsf-feature-list,
ul.imsf-feature-list,
.imsf-plan-details-features { margin: 0; padding: 0; list-style: none !important; }
.imsf-feature-list li,
.imsf-plan-details-features li { position: relative; padding-left: 20px; margin-bottom: 4px; list-style: none !important; list-style-type: none !important; }
.imsf-feature-list li::marker,
.imsf-plan-details-features li::marker { content: ""; }
.imsf-feature-list li.imsf-feature-check::before { content: "✓"; position: absolute; left: 0; color: #6FCF97; font-weight: 700; }
.imsf-feature-list li.imsf-feature-cross::before { content: "✗"; position: absolute; left: 0; color: #EB8181; font-weight: 700; }
.imsf-option-card:hover .imsf-option-tooltip,
.imsf-option-card.is-tapped .imsf-option-tooltip { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

.imsf-checkbox-row { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }

/* ---- Total bar ---- */
.imsf-total-bar {
	display: none;
	align-items: center;
	justify-content: space-between;
	background: #F7F3EA;
	border-radius: 10px;
	padding: 14px 18px;
	margin: 24px 0;
	font-weight: 600;
}
.imsf-total-bar[data-visible="1"] { display: flex; }
.imsf-total-value { color: var(--imsf-gold); font-size: 20px; font-weight: 800; }

/* ---- Nav buttons ---- */
.imsf-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.imsf-btn {
	border-style: solid;
	border-width: 1.5px;
	cursor: pointer;
	font-weight: 600;
	transition: background .2s ease, transform .1s ease;
}
.imsf-btn:active { transform: scale(.98); }
.imsf-btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.imsf-btn-prev { margin-right: auto; }
.imsf-btn-next, .imsf-btn-submit { margin-left: auto; }
.imsf-btn[hidden] { display: none; }

/* ---- Branding ---- */
.imsf-branding-logo { margin-bottom: 20px; display: flex; }
.imsf-branding-align-left { justify-content: flex-start; }
.imsf-branding-align-center { justify-content: center; }
.imsf-branding-align-right { justify-content: flex-end; }
.imsf-branding-logo img { display: block; width: auto; }
.imsf-watermark { text-align: center; font-size: 11px; color: var(--imsf-muted); margin-top: 16px; opacity: .8; }

/* ---- Dropdown option meta ---- */
.imsf-select-option { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.imsf-select-option-label { font-weight: 500; }
.imsf-select-option-price { color: var(--imsf-gold); font-weight: 700; font-size: 12px; }

/* ---- Below-field plan details (dropdown selection's description + features) ---- */
.imsf-plan-details {
	margin-top: 10px;
	padding: 14px 16px;
	background: #FAFAFC;
	border: 1px solid var(--imsf-line);
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.6;
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
}
.imsf-plan-details-desc { margin: 0 0 8px; color: var(--imsf-ink); }
.imsf-plan-details-features { margin: 0; }

.imsf-form-message { margin-top: 16px; font-size: 14px; }
.imsf-form-message.is-error { color: #C0392B; }
.imsf-form-message.is-loading { color: var(--imsf-muted); }

/* ---- WhatsApp floating button ---- */
.imsf-whatsapp-btn {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(19,27,58,.25);
	z-index: 999;
	transition: transform .15s ease, box-shadow .15s ease;
}
.imsf-whatsapp-btn:hover { transform: scale(1.06); box-shadow: 0 14px 30px rgba(19,27,58,.32); }
.imsf-whatsapp-pos-bottom-right { right: 20px; bottom: 20px; }
.imsf-whatsapp-pos-bottom-left  { left: 20px; bottom: 20px; }
.imsf-whatsapp-pos-top-right    { right: 20px; top: 20px; }
.imsf-whatsapp-pos-top-left     { left: 20px; top: 20px; }

/* ---- Success popup ---- */
.imsf-popup-overlay {
	position: fixed;
	inset: 0;
	background: rgba(19,27,58,.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 20px;
	animation: imsf-fade-in .2s ease;
}
.imsf-popup {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 32px;
	max-width: 420px;
	width: 100%;
	text-align: center;
}
.imsf-popup-logo { display: block; margin: 0 auto 12px; max-width: 100%; }
.imsf-popup-heading { margin: 0 0 8px; font-size: 22px; }

/* WhatsApp button placed inside the popup instead of floating */
.imsf-popup-whatsapp-corner-left,
.imsf-popup-whatsapp-corner-right {
	position: absolute !important;
	top: 16px;
	inset-inline-start: auto;
}
.imsf-popup-whatsapp-corner-left { left: 16px; right: auto; }
.imsf-popup-whatsapp-corner-right { right: 16px; left: auto; }
.imsf-popup-whatsapp-row { display: flex; justify-content: center; margin: 12px 0; }
.imsf-popup-whatsapp-row .imsf-whatsapp-btn { position: static; box-shadow: 0 6px 16px rgba(19,27,58,.18); }
.imsf-popup-description { color: var(--imsf-muted); margin: 0 0 16px; font-size: 14px; }
.imsf-popup-total { background: #F7F3EA; border-radius: 10px; padding: 12px; margin-bottom: 20px; font-size: 15px; }
.imsf-popup-total-amount { color: var(--imsf-gold); }
.imsf-popup-query { border: 1px dashed var(--imsf-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; color: var(--imsf-muted); }
.imsf-popup-query-number { color: var(--imsf-ink); font-family: monospace; letter-spacing: .02em; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
	.imsf-form-wrap { padding: 20px; border-radius: 12px; }
	.imsf-progress-label { display: none; }
	.imsf-fields-row { gap: 0; }
	.imsf-field { width: 100% !important; }
	.imsf-nav { flex-wrap: wrap; }
	.imsf-btn { flex: 1 1 auto; text-align: center; }
	.imsf-option-tooltip { position: static; opacity: 1; visibility: visible; transform: none; margin-top: 10px; display: none; }
	.imsf-option-card.is-tapped .imsf-option-tooltip { display: block; }
	.imsf-whatsapp-btn { transform: scale(.9); }
	.imsf-whatsapp-pos-bottom-right, .imsf-whatsapp-pos-bottom-left { bottom: 12px; }
	.imsf-whatsapp-pos-top-right, .imsf-whatsapp-pos-top-left { top: 12px; }
	.imsf-whatsapp-pos-bottom-right, .imsf-whatsapp-pos-top-right { right: 12px; }
	.imsf-whatsapp-pos-bottom-left, .imsf-whatsapp-pos-top-left { left: 12px; }
	.imsf-plan-details { font-size: 12px; padding: 12px; }
	.imsf-popup { padding: 24px; max-width: 100%; }
	.imsf-select-panel { max-height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
	.imsf-step, .imsf-popup-overlay { animation: none; }
	.imsf-btn, .imsf-option-card, .imsf-progress-node { transition: none; }
}

/* ---- Thank You page (rendered by [innovexify_thank_you]) ---- */
.imsf-thankyou-page {
	padding: 40px 20px;
	min-height: 60vh;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}
.imsf-thankyou-card {
	max-width: 640px;
	margin: 0 auto;
	border: 1px solid;
	box-sizing: border-box;
	position: relative;
}
.imsf-thankyou-logo { display: block; margin: 0 auto 20px; }
.imsf-thankyou-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-style: solid;
	white-space: nowrap;
	box-sizing: border-box;
	box-shadow: 0 1px 2px rgba(19,27,58,.06), 0 1px 3px rgba(19,27,58,.04);
}
.imsf-thankyou-badge-full { display: flex; justify-content: center; width: 100%; white-space: normal; }
.imsf-thankyou-badge-icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
}
.imsf-thankyou-badge-text { line-height: 1; }
.imsf-thankyou-card h1 { margin: 0 0 8px; font-size: 28px; text-align: center; }
.imsf-thankyou-desc { margin: 0 0 24px; text-align: center; font-size: 15px; }
.imsf-thankyou-query {
	display: flex; align-items: center; justify-content: space-between;
	border: 1px dashed; border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; font-size: 13px;
}
.imsf-thankyou-query strong { font-family: monospace; letter-spacing: .02em; }
.imsf-thankyou-section { margin-bottom: 20px; }
.imsf-thankyou-section-heading { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.imsf-thankyou-table { width: 100%; border-collapse: collapse; }
.imsf-thankyou-table td { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 14px; vertical-align: top; }
.imsf-thankyou-label { width: 40%; }
.imsf-thankyou-price { text-align: right; white-space: nowrap; }
.imsf-thankyou-total {
	display: flex; align-items: center; justify-content: space-between;
	border-radius: 10px; padding: 16px; margin: 24px 0 8px; font-weight: 700; font-size: 16px;
}
.imsf-thankyou-whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	margin: 24px 0 0;
	padding: 14px 24px;
	border: 1px solid transparent;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	box-shadow: 0 6px 16px rgba(19,27,58,.18);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.imsf-thankyou-whatsapp,
.imsf-thankyou-whatsapp * { text-decoration: none !important; }
.imsf-thankyou-whatsapp:hover { filter: brightness(0.94); transform: scale(1.02); box-shadow: 0 10px 22px rgba(19,27,58,.24); }
.imsf-thankyou-whatsapp svg { flex-shrink: 0; }
.imsf-thankyou-empty { max-width: 480px; margin: 60px auto; text-align: center; color: #8A8FA3; font-size: 15px; }

@media (max-width: 640px) {
	.imsf-thankyou-page { padding: 24px 16px; }
	.imsf-thankyou-card { padding: 24px !important; }
	.imsf-thankyou-card h1 { font-size: 22px; }
	.imsf-thankyou-badge { font-size: 12px !important; padding: 5px 12px 5px 8px !important; }
	.imsf-thankyou-badge-icon-circle { width: 20px !important; height: 20px !important; }
	.imsf-thankyou-whatsapp { padding: 12px 18px; font-size: 14px; }
}

/* ---- [hidden] safety net ----
   Several rules above (.imsf-field, .imsf-popup-overlay, etc.) set their
   own `display` value with the exact same CSS specificity as the
   browser's built-in `[hidden] { display: none }` rule. Because this
   stylesheet loads after the user-agent stylesheet, those rules would
   otherwise win the specificity tie and the element would stay visible
   even after JS sets the `hidden` attribute/property — which is exactly
   why the success popup could appear without a submission and why the
   Close button appeared to do nothing. This rule always wins, so
   `hidden` reliably hides the element everywhere in the form. */
.imsf-form-wrap [hidden] { display: none !important; }