/* ============================================================================
 * Mizrahnik Insurance Calculator
 * Scoped under .mz-insurance-calculator — does not leak globally.
 * Uses --mz-* tokens from theme. Local --ic-* tokens for component shadows.
 * ============================================================================ */

.mz-insurance-calculator {
	/* Local design tokens */
	--ic-radius-card: 14px;
	--ic-radius-button: 12px;
	--ic-radius-pill: 50px;
	--ic-shadow-card: 0 2px 8px rgba(17, 24, 39, 0.06);
	--ic-shadow-card-hover: 0 6px 16px rgba(17, 24, 39, 0.10);
	--ic-shadow-cta: 0 4px 12px rgba(95, 168, 134, 0.25);
	--ic-shadow-cta-hover: 0 8px 20px rgba(95, 168, 134, 0.35);
	--ic-warning-bg: #fff4e6;
	--ic-warning-border: rgba(251, 146, 60, 0.35);
	--ic-warning-icon: #fb923c;
	--ic-warning-text: #5d2e0f;

	direction: rtl;
	unicode-bidi: isolate;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	font-family: fredoka, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background-color: var(--mz-bg, #ffffff);
	color: var(--mz-text, #111827);
}

html[data-theme="dark"] .mz-insurance-calculator {
	--ic-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
	--ic-shadow-card-hover: 0 6px 16px rgba(0, 0, 0, 0.35);
	--ic-warning-bg: rgba(51, 34, 5, 0.35);
	--ic-warning-border: rgba(251, 146, 60, 0.55);
	--ic-warning-text: #ffffff;
}

/* ============================================================================
 * Animations (respect prefers-reduced-motion)
 * ============================================================================ */

@keyframes ic-fade-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ic-slide-up {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ic-overlay-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes ic-dialog-in {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================================
 * Form section
 * ============================================================================ */

.mz-insurance-calculator .insurance-form-section {
	background: var(--mz-surface-2, #ffffff);
	border: 1px solid var(--mz-border, rgba(17, 24, 39, 0.12));
	border-radius: var(--ic-radius-card);
	box-shadow: var(--ic-shadow-card);
	padding: 32px;
	margin-bottom: 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.mz-insurance-calculator .insurance-fieldset {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.mz-insurance-calculator .insurance-fieldset legend {
	font-size: 18px;
	font-weight: 700;
	color: var(--mz-text, #111827);
	margin: 0 0 16px 0;
	padding: 0;
	letter-spacing: -0.3px;
	width: 100%;
	text-align: center;
}

.mz-insurance-calculator .insurance-fieldset--row {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.mz-insurance-calculator .insurance-fieldset--row > legend {
	grid-column: 1 / -1;
	margin-bottom: 20px;
}

.mz-insurance-calculator .form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.mz-insurance-calculator .form-group label {
	font-size: 14px;
	font-weight: 500;
	color: var(--mz-text, #111827);
}

/* ============================================================================
 * Inputs (number + date)
 * ============================================================================ */

.mz-insurance-calculator .form-group input[type="date"],
.mz-insurance-calculator .form-group input[type="number"],
.mz-insurance-calculator .form-group select {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--mz-border, rgba(17, 24, 39, 0.12));
	border-radius: var(--ic-radius-button);
	font-size: 15px;
	font-weight: 500;
	background-color: var(--mz-surface-2, #ffffff);
	color: var(--mz-text, #111827);
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	text-align: center;
	font-family: inherit;
	/* iOS Safari: native date input has internal min-width that ignores width:100%.
	   Reset its appearance and constrain explicitly. */
	-webkit-appearance: none;
	appearance: none;
}

/* Native select arrows sit on the wrong edge in RTL and differ per platform, so the
   arrow is drawn as a background image on the inline-start edge instead. */
.mz-insurance-calculator .form-group select {
	cursor: pointer;
	text-align: start;
	padding-inline-start: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 14px center;
	background-size: 16px 16px;
}

html[data-theme="dark"] .mz-insurance-calculator .form-group select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.mz-insurance-calculator .form-group input[type="date"] {
	direction: ltr;
	unicode-bidi: isolate;
	/* Hide iOS calendar indicator that adds horizontal overflow */
	-webkit-appearance: none;
}

.mz-insurance-calculator .form-group input[type="date"]::-webkit-date-and-time-value {
	text-align: center;
	min-height: 1.2em;
}

.mz-insurance-calculator .form-group input[type="date"]::-webkit-calendar-picker-indicator {
	margin-inline-start: 0;
}

.mz-insurance-calculator .form-group input[type="date"]:focus,
.mz-insurance-calculator .form-group input[type="number"]:focus,
.mz-insurance-calculator .form-group select:focus-visible {
	outline: none;
	border-color: var(--mca-primary, #5FA886);
	box-shadow: 0 0 0 3px rgba(95, 168, 134, 0.18);
}

.mz-insurance-calculator .form-group input[type="number"] {
	/* Hide native spinners on Firefox */
	-moz-appearance: textfield;
}

.mz-insurance-calculator .form-group input[type="number"]::-webkit-inner-spin-button,
.mz-insurance-calculator .form-group input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ============================================================================
 * Labels with icon (date range + num insured)
 * ============================================================================ */

.mz-insurance-calculator .form-group--date-range > label,
.mz-insurance-calculator .form-group--num-insured > label,
.mz-insurance-calculator .form-group--ages > label {
	font-size: 15px;
	font-weight: 700;
	color: var(--mz-text, #111827);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.mz-insurance-calculator .form-group--date-range > label::before,
.mz-insurance-calculator .form-group--num-insured > label::before,
.mz-insurance-calculator .form-group--ages > label::before {
	content: '';
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-color: var(--mca-primary, #5FA886);
}

/* Calendar icon — date range */
.mz-insurance-calculator .form-group--date-range > label::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Person icon — num insured */
.mz-insurance-calculator .form-group--num-insured > label::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Cake icon — ages */
.mz-insurance-calculator .form-group--ages > label::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M4 21v-7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7'/%3E%3Cpath d='M8 12V9M12 12V8M16 12V9'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M4 21v-7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7'/%3E%3Cpath d='M8 12V9M12 12V8M16 12V9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ============================================================================
 * Destination toggle (Nepal checkbox)
 * ============================================================================ */

.mz-insurance-calculator .form-group--destination {
	grid-column: 1 / -1;
}

.mz-insurance-calculator .destination-toggle {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--mz-border, rgba(17, 24, 39, 0.12));
	border-radius: var(--ic-radius-card);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	background: var(--mz-surface-2, #ffffff);
	box-sizing: border-box;
	width: 100%;
}

.mz-insurance-calculator .destination-toggle:hover {
	border-color: var(--mca-primary, #5FA886);
}

.mz-insurance-calculator .destination-toggle:focus-within {
	outline: 2px solid var(--mca-primary, #5FA886);
	outline-offset: 2px;
}

.mz-insurance-calculator .destination-toggle input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

.mz-insurance-calculator .destination-toggle-icon {
	width: 22px;
	height: 22px;
	border: 2px solid var(--mz-border, rgba(17, 24, 39, 0.25));
	border-radius: 6px;
	flex-shrink: 0;
	background: transparent;
	position: relative;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mz-insurance-calculator .destination-toggle:has(input[type="checkbox"]:checked) {
	border-color: var(--mca-primary, #5FA886);
	background: rgba(95, 168, 134, 0.08);
	box-shadow: 0 0 0 1px var(--mca-primary, #5FA886) inset, var(--ic-shadow-card);
}

.mz-insurance-calculator .destination-toggle:has(input[type="checkbox"]:checked) .destination-toggle-icon {
	background-color: var(--mca-primary, #5FA886);
	border-color: var(--mca-primary, #5FA886);
}

.mz-insurance-calculator .destination-toggle:has(input[type="checkbox"]:checked) .destination-toggle-icon::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 13 5'/%3E%3C/svg%3E");
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: center;
}

.mz-insurance-calculator .destination-toggle-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mz-insurance-calculator .destination-toggle-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--mz-text, #111827);
	letter-spacing: -0.2px;
}

.mz-insurance-calculator .destination-toggle-desc {
	font-size: 12px;
	color: var(--mz-muted, #6b7280);
	line-height: 1.4;
}

/* ============================================================================
 * Date range picker (sub-card)
 * ============================================================================ */

.mz-insurance-calculator .date-range-picker {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: end;
	gap: 12px;
	padding: 14px;
	background: rgba(95, 168, 134, 0.05);
	border: 1px solid rgba(95, 168, 134, 0.25);
	border-radius: var(--ic-radius-card);
	box-sizing: border-box;
	max-width: 100%;
	overflow: hidden;
}

html[data-theme="dark"] .mz-insurance-calculator .date-range-picker {
	background: rgba(95, 168, 134, 0.08);
	border-color: rgba(95, 168, 134, 0.30);
}

.mz-insurance-calculator .date-input-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.mz-insurance-calculator .date-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--mz-muted, #6b7280);
	text-align: right;
}

.mz-insurance-calculator .date-range-separator {
	font-size: 13px;
	color: var(--mz-muted, #6b7280);
	font-weight: 600;
	padding-bottom: 12px;
	flex-shrink: 0;
	align-self: end;
}

/* ============================================================================
 * Age per insured
 * ============================================================================ */

/* Ages sit beside the insured count in the first row, so the two questions that
   describe the travellers are answered together before the trip dates. The date
   range moves to its own full-width row beneath them. */
.mz-insurance-calculator .form-group--date-range {
	grid-column: 1 / -1;
}

.mz-insurance-calculator .age-inputs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 12px;
	padding: 14px;
	background: rgba(95, 168, 134, 0.05);
	border: 1px solid rgba(95, 168, 134, 0.25);
	border-radius: var(--ic-radius-card);
	box-sizing: border-box;
	max-width: 100%;
}

html[data-theme="dark"] .mz-insurance-calculator .age-inputs {
	background: rgba(95, 168, 134, 0.08);
	border-color: rgba(95, 168, 134, 0.30);
}

.mz-insurance-calculator .age-input-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.mz-insurance-calculator .age-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--mz-muted, #6b7280);
	text-align: right;
}


/* ============================================================================
 * Plan selection (cards with hidden native radio)
 * ============================================================================ */

.mz-insurance-calculator .plan-options {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.mz-insurance-calculator .plan-radio {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 18px;
	border: 1px solid var(--mz-border, rgba(17, 24, 39, 0.12));
	border-radius: var(--ic-radius-card);
	background: var(--mz-surface-2, #ffffff);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	box-shadow: var(--ic-shadow-card);
	box-sizing: border-box;
}

.mz-insurance-calculator .plan-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

.mz-insurance-calculator .plan-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mz-insurance-calculator .plan-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--mz-text, #111827);
	letter-spacing: -0.3px;
}

.mz-insurance-calculator .plan-desc {
	font-size: 13px;
	font-weight: 400;
	color: var(--mz-muted, #6b7280);
	line-height: 1.5;
}

.mz-insurance-calculator .plan-radio:hover {
	border-color: var(--mca-primary, #5FA886);
	box-shadow: var(--ic-shadow-card-hover);
	transform: translateY(-2px);
}

.mz-insurance-calculator .plan-radio:focus-within {
	outline: 2px solid var(--mca-primary, #5FA886);
	outline-offset: 2px;
}

.mz-insurance-calculator .plan-radio:has(input[type="radio"]:checked) {
	border-color: var(--mca-primary, #5FA886);
	background: rgba(95, 168, 134, 0.08);
	box-shadow: 0 0 0 1px var(--mca-primary, #5FA886) inset, var(--ic-shadow-card);
}

.mz-insurance-calculator .plan-radio:has(input[type="radio"]:checked) .plan-name {
	color: var(--mca-primary, #5FA886);
}

/* Checkmark indicator on selected card */
.mz-insurance-calculator .plan-radio:has(input[type="radio"]:checked)::before {
	content: '';
	position: absolute;
	top: 12px;
	left: 12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--mca-primary, #5FA886);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 13 5'/%3E%3C/svg%3E");
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: center;
}

/* ============================================================================
 * Calculate button (primary CTA)
 * ============================================================================ */

.mz-insurance-calculator .calculate-button {
	width: 100%;
	padding: 16px 28px;
	background: linear-gradient(135deg, var(--mca-primary, #5FA886) 0%, #4a8469 100%);
	color: #ffffff !important;
	border: none;
	border-radius: var(--ic-radius-button);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	box-shadow: var(--ic-shadow-cta);
	letter-spacing: -0.3px;
	font-family: inherit;
}

.mz-insurance-calculator .calculate-button:hover {
	box-shadow: var(--ic-shadow-cta-hover);
	transform: translateY(-1px);
}

.mz-insurance-calculator .calculate-button:active {
	transform: translateY(0);
	box-shadow: var(--ic-shadow-cta);
}

.mz-insurance-calculator .calculate-button:focus-visible {
	outline: 3px solid rgba(95, 168, 134, 0.45);
	outline-offset: 2px;
}

/* ============================================================================
 * Disclaimer (compact, after CTA, before results)
 * ============================================================================ */

.mz-insurance-calculator .insurance-disclaimer {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 20px 0 0 0;
	padding: 14px 16px;
	background-color: var(--ic-warning-bg);
	border: 1px solid var(--ic-warning-border);
	border-radius: var(--ic-radius-button);
	box-sizing: border-box;
}

.mz-insurance-calculator .disclaimer-icon {
	width: 18px;
	height: 18px;
	min-width: 18px;
	color: var(--ic-warning-icon);
	flex-shrink: 0;
	margin-top: 2px;
}

.mz-insurance-calculator .insurance-disclaimer-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ic-warning-text);
	font-weight: 500;
	text-align: right;
}

.mz-insurance-calculator .insurance-disclaimer-text + .insurance-disclaimer-text {
	margin-top: 6px;
}

/* ============================================================================
 * Results section
 * ============================================================================ */

.mz-insurance-calculator .insurance-results-section {
	background: var(--mz-surface-2, #ffffff);
	border: 1px solid var(--mz-border, rgba(17, 24, 39, 0.12));
	border-radius: var(--ic-radius-card);
	box-shadow: var(--ic-shadow-card);
	padding: 32px;
}

.mz-insurance-calculator .insurance-results-section h3 {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 8px 0;
	color: var(--mz-text, #111827);
	text-align: center;
	letter-spacing: -0.3px;
}

.mz-insurance-calculator .days-info {
	font-size: 15px;
	font-weight: 500;
	color: var(--mz-muted, #6b7280);
	margin: 0 0 28px 0;
	text-align: center;
	word-spacing: 0.05em;
}

.mz-insurance-calculator .days-info bdi {
	margin: 0 2px;
	font-weight: 600;
	color: var(--mz-text, #111827);
}

.mz-insurance-calculator .results-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* ============================================================================
 * Company card
 * ============================================================================ */

.mz-insurance-calculator .company-card {
	background: var(--mz-surface-2, #ffffff);
	border: 1px solid var(--mz-border, rgba(17, 24, 39, 0.12));
	border-radius: var(--ic-radius-card);
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: var(--ic-shadow-card);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
	position: relative;
}

.mz-insurance-calculator .company-card:hover {
	box-shadow: var(--ic-shadow-card-hover);
	transform: translateY(-2px);
}

.mz-insurance-calculator .company-card.cheapest {
	border-color: var(--mca-primary, #5FA886);
	box-shadow: 0 0 0 1px var(--mca-primary, #5FA886) inset, var(--ic-shadow-card);
	background: rgba(95, 168, 134, 0.06);
}

.mz-insurance-calculator .company-logo-container {
	width: 100%;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	background: var(--mz-surface, #f6f7f9);
	border-radius: var(--ic-radius-button);
	padding: 12px;
	border: 1px solid var(--mz-border, rgba(17, 24, 39, 0.08));
	box-sizing: border-box;
}

.mz-insurance-calculator .company-logo {
	width: 100%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.mz-insurance-calculator .company-card h4 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 16px 0;
	color: var(--mz-text, #111827);
	letter-spacing: -0.3px;
}

.mz-insurance-calculator .cheapest-badge,
.mz-insurance-calculator .mizrahnik-recommended {
	display: inline-block;
	background-color: var(--mca-primary, #5FA886);
	color: #ffffff !important;
	padding: 4px 12px;
	border-radius: var(--ic-radius-pill);
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 10px;
}

.mz-insurance-calculator .price-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* Caption for the headline figure, shown only for more than one insured. A big number
   on a card reads as a per-person price by default, and every figure here is the group
   total. The negative top margin pulls it under the price, which carries a 16px bottom
   margin of its own, so the caption sits with what it describes. */
.mz-insurance-calculator .price-scope {
	margin: -8px 0 14px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--mz-muted, #6b7280);
}

.mz-insurance-calculator .price {
	font-size: 36px;
	font-weight: 800;
	color: var(--mca-primary, #5FA886);
	margin: 8px 0 16px 0;
	text-align: center;
	direction: ltr;
	unicode-bidi: isolate;
	letter-spacing: -1px;
}

/* ============================================================================
 * Price breakdown
 * ============================================================================ */

.mz-insurance-calculator .price-breakdown {
	border-top: 1px solid var(--mz-border, rgba(17, 24, 39, 0.10));
	padding-top: 16px;
	margin-bottom: 20px;
	width: 100%;
}

.mz-insurance-calculator .breakdown-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	font-size: 13px;
	color: var(--mz-muted, #6b7280);
	border-bottom: 1px solid var(--mz-border, rgba(17, 24, 39, 0.06));
	gap: 12px;
	line-height: 1.5;
}

.mz-insurance-calculator .breakdown-item:last-child {
	border-bottom: none;
}

.mz-insurance-calculator .breakdown-item span:first-child {
	flex: 1;
	text-align: right;
}

.mz-insurance-calculator .breakdown-item span:last-child {
	font-weight: 600;
	color: var(--mz-text, #111827);
	direction: ltr;
	unicode-bidi: isolate;
	min-width: fit-content;
}

/* ============================================================================
 * Agent button (secondary CTA)
 * ============================================================================ */

.mz-insurance-calculator .agent-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: auto;
	padding: 12px 24px;
	background: linear-gradient(135deg, var(--mca-primary, #5FA886) 0%, #4a8469 100%);
	color: #ffffff !important;
	text-decoration: none;
	border-radius: var(--ic-radius-button);
	font-size: 14px;
	font-weight: 700;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	border: none;
	box-shadow: var(--ic-shadow-cta);
	cursor: pointer;
	letter-spacing: -0.2px;
}

.mz-insurance-calculator .agent-button:hover {
	box-shadow: var(--ic-shadow-cta-hover);
	transform: translateY(-1px);
}

.mz-insurance-calculator .agent-button:focus-visible {
	outline: 3px solid rgba(95, 168, 134, 0.45);
	outline-offset: 2px;
}

.mz-insurance-calculator .agent-button-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	stroke: #ffffff;
	color: #ffffff;
}

.mz-insurance-calculator .agent-button-icon path {
	stroke: #ffffff;
}

html[data-theme="dark"] .mz-insurance-calculator .agent-button {
	color: #ffffff !important;
}

html[data-theme="dark"] .mz-insurance-calculator .agent-button-icon,
html[data-theme="dark"] .mz-insurance-calculator .agent-button-icon path {
	stroke: #ffffff;
	color: #ffffff;
}

/* ============================================================================
 * Note (small footer line)
 * ============================================================================ */

.mz-insurance-calculator .calculator-note {
	text-align: center;
	color: var(--mz-muted, #6b7280);
	font-size: 12px;
	margin: 20px 0 0 0;
}

/* ============================================================================
 * Animations (only when motion is allowed)
 * ============================================================================ */

/* ============================================================================
 * Per-insured details dialog
 * ============================================================================ */

.mz-insurance-calculator .price-details-trigger {
	display: block;
	margin: 0 auto 14px;
	padding: 4px 2px;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--mca-primary, #5FA886);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mz-insurance-calculator .price-details-trigger:hover {
	color: var(--mz-link-hover, #4e9173);
}

.mz-insurance-calculator .price-details-trigger:focus-visible {
	outline: 3px solid var(--mz-focus, rgba(95, 168, 134, 0.45));
	outline-offset: 2px;
	border-radius: 4px;
}

/* The body-level mount for the dialog. It carries the component class so the scoped
   rules below still match, and this modifier strips the wrapper's own box: its only job
   is to host a fixed-position child, so it must take up no space in the page. */
.mz-insurance-calculator--portal {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
}

.mz-insurance-calculator .details-overlay {
	position: fixed;
	inset: 0;
	/* Max 32-bit signed int. The calculator is embedded in pages we do not control, above
	   an Elementor sticky header and whatever else a plugin decides to float. 9999 lost to
	   the site header on mobile. Nothing should ever need to sit above a modal. */
	z-index: 2147483647;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(17, 24, 39, 0.55);
	box-sizing: border-box;
}

.mz-insurance-calculator .details-dialog {
	width: 100%;
	max-width: 460px;
	/* 100% of the overlay's content box, which is the viewport minus its padding. The
	   previous 85vh plus 40px of padding could exceed the screen on a short phone, which
	   pushed the head of a tall dialog out of reach. */
	max-height: 100%;
	overflow-y: auto;
	/* Stops the scroll chaining to the page when the list hits its end. */
	overscroll-behavior: contain;
	background: var(--mz-surface-2, #ffffff);
	color: var(--mz-text, #111827);
	border: 1px solid var(--mz-border, rgba(17, 24, 39, 0.12));
	border-radius: var(--ic-radius-card);
	box-shadow: 0 18px 48px rgba(17, 24, 39, 0.28);
	box-sizing: border-box;
}

/* Sticks to the top of the dialog's own scroll area so the close button is reachable at
   any scroll position. With six insured the list is longer than the screen, and a close
   button that scrolls away leaves the backdrop and Escape as the only way out, neither
   of which is discoverable on a phone. The logo rides along, so you can always see whose
   breakdown you are reading. Needs an opaque background: rows pass underneath it. */
.mz-insurance-calculator .details-dialog-head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 14px;
	background: var(--mz-surface-2, #ffffff);
	border-bottom: 1px solid var(--mz-border, rgba(17, 24, 39, 0.12));
	border-radius: var(--ic-radius-card) var(--ic-radius-card) 0 0;
}

.mz-insurance-calculator .details-dialog-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

/* Sized by max-* so a wide wordmark and a square badge both sit on the same baseline
   without distortion. If the src is dead the alt text renders in its place, which is
   the company name, so the header never comes up blank. */
.mz-insurance-calculator .details-dialog-logo {
	display: block;
	max-width: 150px;
	max-height: 40px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.mz-insurance-calculator .details-dialog-sub {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--mz-muted, #6b7280);
}

.mz-insurance-calculator .details-close {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	/* Logical, not physical: `margin-right` pulled the button inward in RTL, where its
	   outer edge is on the left. inline-end is the outer edge in both directions. */
	margin-block-start: -8px;
	margin-inline-end: -8px;
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	color: var(--mz-muted, #6b7280);
	cursor: pointer;
	border-radius: var(--ic-radius-button);
}

.mz-insurance-calculator .details-close:hover {
	color: var(--mz-text, #111827);
	background: var(--mz-surface, #f6f7f9);
}

.mz-insurance-calculator .details-close:focus-visible {
	outline: 3px solid var(--mz-focus, rgba(95, 168, 134, 0.45));
	outline-offset: -2px;
}

.mz-insurance-calculator .details-dialog-body {
	padding: 8px 20px 4px;
}

.mz-insurance-calculator .details-person {
	padding: 12px 0;
	border-bottom: 1px solid var(--mz-border, rgba(17, 24, 39, 0.10));
}

.mz-insurance-calculator .details-person:last-child {
	border-bottom: none;
}

.mz-insurance-calculator .details-person-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.mz-insurance-calculator .details-person-name {
	font-size: 14px;
	font-weight: 700;
}

.mz-insurance-calculator .details-person-bracket {
	margin-inline-start: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--mz-muted, #6b7280);
}

.mz-insurance-calculator .details-person-total {
	font-size: 15px;
	font-weight: 800;
	color: var(--mca-primary, #5FA886);
	direction: ltr;
	unicode-bidi: isolate;
}

.mz-insurance-calculator .details-line {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 3px 0;
	font-size: 13px;
	color: var(--mz-muted, #6b7280);
}

.mz-insurance-calculator .details-line span:last-child {
	direction: ltr;
	unicode-bidi: isolate;
	flex-shrink: 0;
}

.mz-insurance-calculator .details-dialog-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 20px 18px;
	border-top: 1px solid var(--mz-border, rgba(17, 24, 39, 0.12));
	font-size: 15px;
	font-weight: 700;
}

.mz-insurance-calculator .details-grand-total {
	font-size: 20px;
	font-weight: 800;
	color: var(--mca-primary, #5FA886);
	direction: ltr;
	unicode-bidi: isolate;
}

@media (prefers-reduced-motion: no-preference) {
	.mz-insurance-calculator .insurance-form-section[data-animate="true"] {
		animation: ic-slide-up 0.4s ease-out;
	}

	.mz-insurance-calculator .insurance-results-section[data-animate="true"] {
		animation: ic-slide-up 0.4s ease-out;
	}

	/* Gated on the same data-animate as the section around them. render() rebuilds the
	   whole tree on every interaction, so an ungated rule here replayed the staggered
	   entrance each time a plan, an age, a date, or the details dialog was touched. The
	   cards enter once, when results are first calculated. */
	.mz-insurance-calculator .insurance-results-section[data-animate="true"] .company-card {
		animation: ic-fade-in 0.4s ease-out both;
	}

	.mz-insurance-calculator .insurance-results-section[data-animate="true"] .company-card:nth-child(1) { animation-delay: 0.1s; }
	.mz-insurance-calculator .insurance-results-section[data-animate="true"] .company-card:nth-child(2) { animation-delay: 0.2s; }
	.mz-insurance-calculator .insurance-results-section[data-animate="true"] .company-card:nth-child(3) { animation-delay: 0.3s; }

	/* The dialog is an element entering the screen, so ease-out, and short: 200ms for
	   the panel over a 150ms scrim. Anything slower sits between the click and the
	   answer the click asked for. */
	.mz-insurance-calculator .details-overlay {
		animation: ic-overlay-in 0.15s ease-out;
	}

	.mz-insurance-calculator .details-dialog {
		animation: ic-dialog-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
	}
}

/* ============================================================================
 * Responsive (mobile)
 * ============================================================================ */

@media (max-width: 767px) {
	.mz-insurance-calculator {
		padding: 12px;
	}

	.mz-insurance-calculator .insurance-form-section,
	.mz-insurance-calculator .insurance-results-section {
		padding: 20px;
	}

	.mz-insurance-calculator .insurance-fieldset--row {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.mz-insurance-calculator .date-range-picker {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding: 12px;
	}

	.mz-insurance-calculator .date-range-separator {
		display: none;
	}

	.mz-insurance-calculator .form-group input[type="date"],
	.mz-insurance-calculator .form-group input[type="number"],
	.mz-insurance-calculator .form-group select {
		font-size: 16px; /* prevent iOS zoom-on-focus */
		padding: 14px 12px;
	}

	.mz-insurance-calculator .form-group select {
		padding-inline-start: 38px;
	}

	.mz-insurance-calculator .plan-options {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.mz-insurance-calculator .results-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	/* Six insured is a long dialog on a short phone, so give it back the room the
	   overlay padding was taking. */
	.mz-insurance-calculator .details-overlay {
		padding: 12px;
	}

	.mz-insurance-calculator .details-dialog-head {
		padding: 14px 16px 12px;
	}

	.mz-insurance-calculator .details-dialog-body {
		padding: 6px 16px 4px;
	}

	.mz-insurance-calculator .details-dialog-foot {
		padding: 12px 16px 14px;
	}

	.mz-insurance-calculator .insurance-results-section h3 {
		font-size: 20px;
	}

	.mz-insurance-calculator .company-card h4 {
		font-size: 16px;
	}

	.mz-insurance-calculator .price {
		font-size: 28px;
	}

	.mz-insurance-calculator .breakdown-item {
		font-size: 12px;
	}
}