/**
 * Southwest Companion Pass — Offer Combo Calculator.
 *
 * Styled to the KTT style guide (docs/STYLE-GUIDE.md, sections 9a and 9b),
 * Katie, 2026-10-15: a Teal 50 tool box with a header strip, the parts in one
 * white area inside, Montserrat throughout, palette colors only, no shadows,
 * 4px corners on fields, buttons and tags, 8px on boxes, nothing a reader
 * must read under 12px, and text inside the tool at 14–16px.
 *
 * Teal means "you can click this". Results and text are teal-black.
 *
 * ⚠️ The plan generator's RENDER test checks that every ktt-cp- class its
 * renderer emits still appears in this file. Restyle freely; don't drop or
 * rename a class selector.
 *
 * ── Why the !important declarations ──────────────────────────────────────────
 * This tool is embedded inside Avada page content, and Avada styles headings and
 * paragraphs from higher-specificity selectors than a single class can beat —
 * it was overriding size, weight, colour, alignment, capitalisation and margins,
 * so panel headings rendered as large centred title-case text with big gaps.
 *
 * Rather than escalate specificity selector by selector, everything the theme
 * contests is declared !important inside a `.ktt-cp` scope. Nothing outside the
 * tool is touched. If this is ever used outside Avada the rules are still
 * correct, just belt-and-braces.
 *
 * The other fix here is `min-width: 0` on every flex and grid child. Those
 * default to min-width:auto and refuse to shrink below their content, which is
 * what pushed the second column and the header text off the right edge.
 */

/* ── Root: the tool box ───────────────────────────────────────────────────── */
.ktt-cp {
	/* Style guide palette. */
	--cp-teal-50: #F0F7F9;
	--cp-teal-100: #D7E8ED;
	--cp-teal-200: #A5CCD5;
	--cp-teal-300: #84BCC9;
	--cp-teal: #1F7F95;
	--cp-teal-dark: #155F70;
	--cp-ink: #20343A;
	--cp-caption: #4A5F66;
	--cp-alert: #B4453A;
	--cp-alert-bg: #FDF4F3;
	--cp-font: 'Montserrat', Arial, Helvetica, sans-serif;

	/* Older names, kept so every rule below reads from the palette. */
	--cp-accent: var(--cp-teal-200);
	--cp-bg: var(--cp-teal-50);
	--cp-line: var(--cp-teal-100);
	--cp-muted: var(--cp-caption);

	display: block !important;
	width: 100% !important;
	max-width: 900px !important;
	/*
	 * Avada's column wrapper is a flex container, which makes this a flex item —
	 * so it inherits `min-width: auto` and can be held open by its own contents.
	 * Explicit guard at the root, so a future too-wide child inside the tool
	 * cannot blow out the lesson around it the way the card dropdowns did.
	 */
	min-width: 0 !important;
	margin: 0 auto !important;
	padding: 0 !important;
	background: var(--cp-teal-50) !important;
	border: 1px solid var(--cp-teal-100) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	overflow: hidden !important;
	font-family: var(--cp-font) !important;
	color: var(--cp-ink) !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	text-align: left !important;
	-webkit-font-smoothing: antialiased;
}

.ktt-cp *,
.ktt-cp *::before,
.ktt-cp *::after {
	box-sizing: border-box;
}

.ktt-cp .ktt-cp-data { display: none !important; }

/*
 * The detail panel and the held-card note are toggled with the `hidden`
 * attribute. Guard it: a theme rule setting `display` on divs would otherwise
 * make hidden elements visible.
 */
.ktt-cp [hidden] { display: none !important; }
.ktt-cp-detail { display: block; }

/*
 * Belt and braces against wpautop: if anything upstream still injects line
 * breaks or empty paragraphs into the output, they add no height.
 */
.ktt-cp br { display: none !important; }
.ktt-cp p:empty { display: none !important; }

/* ── Scoped reset: the properties Avada fights over ───────────────────────── */
.ktt-cp h2,
.ktt-cp h3,
.ktt-cp h4,
.ktt-cp p,
.ktt-cp label,
.ktt-cp table,
.ktt-cp th,
.ktt-cp td,
.ktt-cp button,
.ktt-cp select,
.ktt-cp input,
.ktt-cp a,
.ktt-cp span,
.ktt-cp div,
.ktt-cp summary {
	font-family: var(--cp-font) !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	white-space: normal !important;
	overflow-wrap: break-word;
}

.ktt-cp h2,
.ktt-cp h3,
.ktt-cp h4,
.ktt-cp p {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	line-height: 1.5 !important;
	text-shadow: none !important;
	color: var(--cp-ink) !important;
}
.ktt-cp h2::before, .ktt-cp h2::after,
.ktt-cp h3::before, .ktt-cp h3::after,
.ktt-cp h4::before, .ktt-cp h4::after { content: none !important; display: none !important; }

/* Every flex / grid child must be allowed to shrink. */
.ktt-cp-preset,
.ktt-cp-ctl,
.ktt-cp-stat,
.ktt-cp-box,
.ktt-cp-grid > *,
.ktt-cp-stats > *,
.ktt-cp-kv > * { min-width: 0 !important; }

/* ── Header strip ─────────────────────────────────────────────────────────── */
.ktt-cp-head {
	background: transparent !important;
	border-radius: 0 !important;
	padding: 20px 20px 4px !important;
	margin: 0 !important;
}
.ktt-cp .ktt-cp-head h2 {
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--cp-ink) !important;
	margin: 0 0 6px !important;
}
.ktt-cp .ktt-cp-head p {
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	color: var(--cp-caption) !important;
}

.ktt-cp .ktt-cp-stamp {
	font-size: 13px !important;
	color: var(--cp-caption) !important;
	margin: 0 !important;
	padding: 4px 20px 16px !important;
	background: transparent !important;
	border: 0 !important;
}

/* Warning look: pale red, 4px brick-red bar, teal-black text. */
.ktt-cp .ktt-cp-notice {
	margin: 0 20px 16px !important;
	padding: 12px 16px !important;
	border-radius: 0 !important;
	background: var(--cp-alert-bg) !important;
	border: 0 !important;
	border-left: 4px solid var(--cp-alert) !important;
	color: var(--cp-ink) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

/* Links: teal, 1px underline 3px below, hover Teal 700. */
.ktt-cp a.ktt-cp-a {
	color: var(--cp-teal) !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 3px;
	box-shadow: none !important;
}
.ktt-cp a.ktt-cp-a:hover { color: var(--cp-teal-dark) !important; }

/* ── The white area and its sections ──────────────────────────────────────── */
.ktt-cp-body {
	display: block !important;
	min-width: 0 !important;
	margin: 0 20px !important;
	background: #fff !important;
	border: 1px solid var(--cp-teal-100) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
}

/* Sections are flush and divided, never floating cards. */
.ktt-cp-panel {
	background: #fff !important;
	border: 0 !important;
	border-bottom: 1px solid var(--cp-line) !important;
	border-radius: 0 !important;
	padding: 20px !important;
	margin: 0 !important;
}
.ktt-cp-panel:last-of-type { border-bottom: 0 !important; }

/* Section label: 12px bold uppercase, letter-spacing 1.2px, caption color. */
.ktt-cp .ktt-cp-panel__h {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 1.2px !important;
	text-transform: uppercase !important;
	color: var(--cp-caption) !important;
	line-height: 1.4 !important;
	margin: 0 0 12px !important;
}
/* The line under a section label: ordinary text, not shouted. */
.ktt-cp .ktt-cp-panel__sub {
	display: block !important;
	margin-top: 6px !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--cp-ink) !important;
}

.ktt-cp .ktt-cp-note {
	margin: 10px 0 0 !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: var(--cp-caption) !important;
}
.ktt-cp .ktt-cp-note strong { color: var(--cp-ink) !important; font-weight: 600 !important; }

/* ── Presets: option cards ────────────────────────────────────────────────── */
.ktt-cp-presets { display: flex !important; gap: 10px; flex-wrap: wrap; }
.ktt-cp .ktt-cp-preset {
	position: relative;
	flex: 1 1 200px;
	background: #fff !important;
	color: var(--cp-ink) !important;
	border: 1px solid var(--cp-teal-200) !important;
	border-radius: 8px !important;
	padding: 12px 36px 12px 14px !important;
	margin: 0 !important;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
	box-shadow: none !important;
	text-transform: none !important;
}
.ktt-cp .ktt-cp-preset:hover { border-color: var(--cp-teal) !important; background: #fff !important; }
.ktt-cp .ktt-cp-preset:focus-visible { outline: 2px solid var(--cp-teal) !important; outline-offset: 2px; }
/* Picked: 2px Teal 500 border, Teal 50 fill, a teal check in the corner. */
.ktt-cp .ktt-cp-preset.is-active {
	background: var(--cp-teal-50) !important;
	color: var(--cp-ink) !important;
	border: 2px solid var(--cp-teal) !important;
	padding: 11px 35px 11px 13px !important;
}
.ktt-cp .ktt-cp-preset.is-active::after {
	content: "\2713";
	position: absolute;
	top: 8px;
	right: 10px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--cp-teal);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}
.ktt-cp .ktt-cp-preset__t {
	display: block !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	margin-bottom: 3px !important;
	color: var(--cp-ink) !important;
}
.ktt-cp .ktt-cp-preset__s {
	display: block !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	color: var(--cp-caption) !important;
}

/* ── Controls ─────────────────────────────────────────────────────────────── */
.ktt-cp-controls { display: flex !important; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.ktt-cp-ctl { display: flex !important; flex-direction: column; gap: 8px; flex: 1 1 260px; }

/*
 * ⚠️ These `min-width: 0` rules are load-bearing. Do not tidy them away.
 *
 * A flex item defaults to `min-width: auto`, which means it refuses to shrink
 * below its content's minimum size. For a <select>, that minimum is the width of
 * its LONGEST OPTION — and the options here are full card names read from the
 * backend, e.g. "Southwest Rapid Rewards® Premier Business Credit Card".
 *
 * So the control took a floor of roughly 400px, the flex row could not shrink
 * under it, and the whole thing propagated outwards until the Avada column
 * holding the lesson was wider than the phone. The visible symptom was not "the
 * calculator looks squashed" — it was the lesson's own headings and images cut
 * off at the right edge, on this one page, which sent us looking at Avada
 * settings, browser caches and the page layout for the better part of a week.
 *
 * The width/max-width on the select itself does NOT fix this. Those size the
 * select inside its parent; the parent is what is being held open.
 *
 * The header comment on this file already said min-width:0 was on "every flex
 * and grid child". It was on `.ktt-cp-kv > *` and `.ktt-cp-col`. It was not on
 * these. If you add another flex container to this tool, add it here too.
 */
.ktt-cp-controls > *,
.ktt-cp-ctl,
.ktt-cp-ctl > *,
.ktt-cp-presets > *,
.ktt-cp-stats > * {
	min-width: 0 !important;
}
/* Form label: 14px 600. */
.ktt-cp .ktt-cp-ctl > label {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--cp-ink) !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}
/*
 * Form field: 1px Teal 200, 4px corners, 50px tall, 16px text, 16px inside.
 * The browser's own arrow differs on every device, so it's replaced with
 * one caption-colored chevron (an inline SVG, no file to load).
 */
.ktt-cp select.ktt-cp-pick {
	-webkit-appearance: none !important;
	appearance: none !important;
	font-size: 16px !important;
	height: 50px !important;
	padding: 0 44px 0 16px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234A5F66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	background-size: 12px 8px !important;
	border: 1px solid var(--cp-teal-200) !important;
	border-radius: 4px !important;
	background-color: #fff !important;
	color: var(--cp-ink) !important;
	width: 100% !important;
	max-width: 100% !important;
	/* See the note above: without this the longest option name sets the floor. */
	min-width: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
}
.ktt-cp input[type="number"] {
	font-size: 16px !important;
	height: 50px !important;
	padding: 0 16px !important;
	border: 1px solid var(--cp-teal-200) !important;
	border-radius: 4px !important;
	width: 140px !important;
	max-width: 100% !important;
	margin: 0 !important;
	background: #fff !important;
	color: var(--cp-ink) !important;
	box-shadow: none !important;
	font-variant-numeric: tabular-nums;
}
.ktt-cp select.ktt-cp-pick:focus,
.ktt-cp input[type="number"]:focus {
	outline: 2px solid var(--cp-teal) !important;
	outline-offset: 1px;
	border-color: var(--cp-teal) !important;
}

/* Pick-one toggle: equal buttons in a Teal 50 track; picked is Teal 500. */
.ktt-cp .ktt-cp-seg {
	display: inline-flex !important;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px !important;
	background: var(--cp-teal-50) !important;
	border: 1px solid var(--cp-teal-100) !important;
	border-radius: 8px !important;
	align-self: flex-start;
	max-width: 100%;
}
.ktt-cp .ktt-cp-seg button {
	flex: 1 1 0;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--cp-ink) !important;
	padding: 9px 16px !important;
	margin: 0 !important;
	cursor: pointer;
	border-radius: 4px !important;
	box-shadow: none !important;
	text-align: center !important;
}
.ktt-cp .ktt-cp-seg button:hover { background: #fff !important; }
.ktt-cp .ktt-cp-seg button.is-on { background: var(--cp-teal) !important; color: #fff !important; }

/* On/off switch: 36 x 20, fully rounded; off Teal 200, on Teal 500, 14px label. */
.ktt-cp .ktt-cp-switch {
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	margin: 14px 0 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	cursor: pointer;
	color: var(--cp-ink) !important;
}
.ktt-cp-switch input[type="checkbox"] {
	flex: 0 0 36px;
	width: 36px !important;
	height: 20px !important;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	appearance: none;
	-webkit-appearance: none;
	background: var(--cp-teal-200) !important;
	border: 0 !important;
	border-radius: 999px !important;
	position: relative;
	cursor: pointer;
}
.ktt-cp-switch input[type="checkbox"]:checked { background: var(--cp-teal) !important; }
.ktt-cp-switch input[type="checkbox"]:focus-visible { outline: 2px solid var(--cp-teal); outline-offset: 2px; }
.ktt-cp-switch input[type="checkbox"]::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	transition: left .15s ease;
}
.ktt-cp-switch input[type="checkbox"]:checked::after { left: 18px; }

/* ── Tracker section (Katie, 2026-10-14 and 2026-10-15) ───────────────────── */
/*
 * The tracker question is the section label (same look as every other
 * section's), no "Your settings" above it; the held-a-card switch sits in a
 * Teal 50 box below. Success is a check mark with teal-black text on
 * Teal 50, no green.
 */
.ktt-cp .ktt-cp-tracker__h label {
	font: inherit !important;
	color: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	margin: 0 !important;
	cursor: text;
}
.ktt-cp .ktt-cp-tracker__field { display: flex !important; flex-direction: column; gap: 10px; min-width: 0 !important; }
.ktt-cp .ktt-cp-tracker__field input[type="number"] {
	width: 100% !important;
	max-width: 280px !important;
	padding: 0 16px !important;
	font-weight: 600 !important;
}
.ktt-cp .ktt-cp-tracker__hint {
	margin: 0 !important;
	max-width: 62ch;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: var(--cp-caption) !important;
}
.ktt-cp .ktt-cp-tracker__held {
	margin: 18px 0 0 !important;
	padding: 14px 16px !important;
	background: var(--cp-teal-50) !important;
	border: 1px solid var(--cp-teal-100) !important;
	border-radius: 8px !important;
}
.ktt-cp .ktt-cp-switch--held {
	align-items: center;
	margin: 0 !important;
	font-size: 15px !important;
}
.ktt-cp .ktt-cp-switch--held input[type="checkbox"] { margin: 0 !important; }
.ktt-cp .ktt-cp-tracker__heldnote {
	margin: 10px 0 0 48px !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: var(--cp-ink) !important;
}

/* ── Detail ───────────────────────────────────────────────────────────────── */
.ktt-cp .ktt-cp-detail .ktt-cp-panel__h {
	/* The combo's name: a heading for the results, not a section label. */
	font-size: 20px !important;
	font-weight: 700 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--cp-ink) !important;
	margin: 0 0 14px !important;
}

/* Results boxes: Teal 50, 1px Teal 100, 8px; 12px uppercase label; big number. */
.ktt-cp-stats { display: flex !important; gap: 10px; flex-wrap: wrap; margin: 0 0 12px !important; }
.ktt-cp .ktt-cp-stat {
	flex: 1 1 200px;
	background: var(--cp-teal-50) !important;
	border: 1px solid var(--cp-teal-100) !important;
	color: var(--cp-ink) !important;
	border-radius: 8px !important;
	padding: 14px 16px !important;
}
.ktt-cp .ktt-cp-stat--full { flex: 1 1 100%; }
.ktt-cp .ktt-cp-stat__lab {
	display: block !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 1.2px !important;
	text-transform: uppercase !important;
	color: var(--cp-caption) !important;
}
.ktt-cp .ktt-cp-stat__val {
	display: block !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	margin-top: 4px !important;
	color: var(--cp-ink) !important;
	font-variant-numeric: tabular-nums;
}
.ktt-cp-stat__cards { margin-top: 10px !important; }

.ktt-cp-cardline { margin: 0 0 10px !important; }
.ktt-cp-cardline:last-child { margin-bottom: 0 !important; }
.ktt-cp a.ktt-cp-cardname,
.ktt-cp span.ktt-cp-cardname {
	display: inline !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
}
.ktt-cp a.ktt-cp-cardname {
	color: var(--cp-teal) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 3px;
}
.ktt-cp a.ktt-cp-cardname:hover { color: var(--cp-teal-dark) !important; }
.ktt-cp span.ktt-cp-cardname { color: var(--cp-ink) !important; }
.ktt-cp .ktt-cp-offertext {
	display: block !important;
	margin-top: 3px !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var(--cp-caption) !important;
}

/* Tip: the callout in Montserrat, 4px Teal 500 bar, square corners. */
.ktt-cp .ktt-cp-swap {
	flex: 1 1 100%;
	background: var(--cp-teal-50) !important;
	border: 0 !important;
	border-left: 4px solid var(--cp-teal) !important;
	border-radius: 0 !important;
	padding: 14px 18px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--cp-ink) !important;
	line-height: 1.55 !important;
}

.ktt-cp .ktt-cp-altlab {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 1.2px !important;
	text-transform: uppercase !important;
	color: var(--cp-caption) !important;
	margin: 0 0 8px !important;
}
.ktt-cp [data-cp="plus-toggle"]:not(:empty) { margin: 0 0 14px !important; }

.ktt-cp-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
}
.ktt-cp .ktt-cp-box {
	background: #fff !important;
	border: 1px solid var(--cp-teal-100) !important;
	border-radius: 8px !important;
	padding: 16px 18px !important;
}
/* Box titles are section labels. */
.ktt-cp .ktt-cp-box h4 {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 1.2px !important;
	text-transform: uppercase !important;
	color: var(--cp-caption) !important;
	margin: 0 0 10px !important;
	line-height: 1.4 !important;
}
.ktt-cp .ktt-cp-box p {
	font-size: 14px !important;
	line-height: 1.6 !important;
	margin: 0 0 10px !important;
}
.ktt-cp .ktt-cp-box p:last-child { margin-bottom: 0 !important; }
.ktt-cp .ktt-cp-box p.ktt-cp-note { color: var(--cp-caption) !important; }

.ktt-cp-kv {
	display: flex !important;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 15px !important;
	padding: 7px 0;
	border-bottom: 1px solid var(--cp-teal-100);
}
.ktt-cp-kv:last-child { border-bottom: 0; }
.ktt-cp .ktt-cp-kv__v {
	font-weight: 700 !important;
	font-variant-numeric: tabular-nums;
	text-align: right !important;
	white-space: nowrap !important;
	color: var(--cp-ink) !important;
}
/* The headline total: the callout look, one per tool. */
.ktt-cp .ktt-cp-kv.is-total {
	margin: 8px 0 4px;
	padding: 12px 14px;
	background: var(--cp-teal-50);
	border-bottom: 0;
	border-left: 4px solid var(--cp-teal);
	font-size: 15px !important;
	font-weight: 600 !important;
}
.ktt-cp .ktt-cp-kv.is-total .ktt-cp-kv__v { font-size: 24px !important; color: var(--cp-ink) !important; }

.ktt-cp .ktt-cp-status {
	margin-top: 12px !important;
	padding: 12px 16px !important;
	border-radius: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.55 !important;
	color: var(--cp-ink) !important;
}
.ktt-cp-status:empty { display: none !important; }
/* Success: teal-black text on Teal 50, no green (the copy carries the check mark). */
.ktt-cp .ktt-cp-status.is-good {
	background: var(--cp-teal-50) !important;
	border: 0 !important;
	border-left: 4px solid var(--cp-teal) !important;
}
/* Warning: pale red, 4px brick-red bar, teal-black text. */
.ktt-cp .ktt-cp-status.is-short {
	background: var(--cp-alert-bg) !important;
	border: 0 !important;
	border-left: 4px solid var(--cp-alert) !important;
}

.ktt-cp .ktt-cp-topoff { margin-top: 12px !important; font-size: 14px !important; }
.ktt-cp-topoff:empty { display: none !important; }

/* ── Spend timing bar: progress bar spec ──────────────────────────────────── */
.ktt-cp .ktt-cp-legend {
	display: flex !important;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--cp-caption) !important;
	margin: 10px 0 6px !important;
}
.ktt-cp-dot {
	display: inline-block !important;
	width: 10px;
	height: 10px;
	border-radius: 4px;
	margin-right: 6px;
	vertical-align: -1px;
}
.ktt-cp-dot--before { background: var(--cp-teal-200) !important; }
.ktt-cp-dot--after { background: var(--cp-teal) !important; }
.ktt-cp-bar {
	display: flex !important;
	height: 8px;
	background: var(--cp-teal-100);
	border: 0;
	border-radius: 4px;
	overflow: hidden;
	margin: 0 0 10px !important;
}
.ktt-cp-bar__before { background: var(--cp-teal-200) !important; }
.ktt-cp-bar__after { background: var(--cp-teal) !important; }

/* ── Comparison table: data table spec ────────────────────────────────────── */
/*
 * ⚠️ `contain: inline-size` is the fix for a week-long bug. Do not remove it.
 *
 * The table below carries `min-width: 560px` so it stays legible, and this
 * wrapper scrolls it. `overflow-x: auto` stops the table OVERFLOWING — it does
 * not stop the table's 560px contributing to min-content width. In normal block
 * layout that floor propagates straight up the ancestors:
 *
 *     table min-width          560
 *     + panel padding/borders  ~30
 *     + .ktt-sw-wrap padding    32
 *     = .ktt-sw-wrap min-content 622
 *
 * `.ktt-sw-wrap` is a flex item of Avada's column, which is 270px wide on a
 * phone. It cannot go below its min-content, so it rendered at 622 and every
 * child stretched with it — and what a reader saw was the LESSON's headings,
 * banner and sidebar cut off at the right edge, on the one page that happens to
 * contain this tool.
 *
 * `contain: inline-size` makes this element's inline size independent of its
 * contents, severing that chain at the source. Measured in Chrome device mode at
 * 390px: wrap 622 → 270, with the tables still scrolling correctly inside.
 *
 * What did NOT work, so nobody repeats it:
 *   - `min-width: 0` on `.ktt-sw-wrap` (even !important) — no effect at all.
 *   - `width`/`max-width: 100%` on the table or the wrapper — those size the
 *     element within its parent; the parent is what is being held open.
 *   - `min-width: 0` on the calculator's flex children (shipped in 0.7.7) —
 *     correct hygiene, wrong bug.
 *
 * Support: Chrome 105+, Safari 16+, Firefox 110+. On anything older this simply
 * degrades to the old behaviour rather than breaking.
 */
.ktt-cp-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	contain: inline-size;
	border: 1px solid var(--cp-teal-100);
	border-radius: 8px;
}
.ktt-cp table.ktt-cp-table {
	width: 100% !important;
	min-width: 560px;
	border-collapse: collapse !important;
	font-size: 14px !important;
	margin: 0 !important;
	background: #fff !important;
	border: 0 !important;
}
.ktt-cp .ktt-cp-table th,
.ktt-cp .ktt-cp-table td {
	padding: 12px 14px !important;
	vertical-align: top !important;
	border-bottom: 1px solid var(--cp-teal-100) !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-top: 0 !important;
	background: none !important;
	font-size: inherit !important;
	color: var(--cp-ink) !important;
}
/* Teal header row, white 12px bold uppercase labels. */
.ktt-cp .ktt-cp-table th {
	background: var(--cp-teal) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	color: #fff !important;
	line-height: 1.35 !important;
	vertical-align: bottom !important;
	border-bottom: 0 !important;
}
.ktt-cp .ktt-cp-th__sub {
	display: block !important;
	margin-top: 3px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: #fff !important;
}
.ktt-cp-row { cursor: pointer; }
.ktt-cp .ktt-cp-row--head td { border-top: 1px solid var(--cp-teal-100) !important; border-bottom: 0 !important; padding-bottom: 2px !important; }
.ktt-cp .ktt-cp-row--data td { padding-top: 2px !important; padding-bottom: 14px !important; }
.ktt-cp .ktt-cp-table tbody tr:first-child td { border-top: 0 !important; }
.ktt-cp .ktt-cp-row:hover td { background: var(--cp-teal-50) !important; }
.ktt-cp .ktt-cp-row.is-sel td { background: var(--cp-teal-50) !important; }
.ktt-cp .ktt-cp-row--head.is-sel td:first-child,
.ktt-cp .ktt-cp-row--data.is-sel td:first-child { box-shadow: inset 4px 0 0 var(--cp-teal) !important; }
.ktt-cp .ktt-cp-clabel {
	display: block !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--cp-ink) !important;
}
.ktt-cp .ktt-cp-cnames {
	display: block !important;
	margin-top: 3px !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--cp-caption) !important;
}
.ktt-cp .ktt-cp-num { font-variant-numeric: tabular-nums; font-weight: 600 !important; white-space: nowrap !important; }
.ktt-cp .ktt-cp-muted { color: var(--cp-caption) !important; font-size: 13px !important; }
/* Tags: 4px corners, 12px bold. */
.ktt-cp .ktt-cp-pill {
	display: inline-block !important;
	padding: 3px 8px !important;
	border-radius: 4px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
	color: var(--cp-ink) !important;
}
/* Filled status tags (Katie's pick, 2026-10-15): earned on Teal 200, short on brick red. */
.ktt-cp .ktt-cp-pill.is-good { background: var(--cp-teal-200) !important; border: 0 !important; }
.ktt-cp .ktt-cp-pill.is-short { background: var(--cp-alert) !important; border: 0 !important; color: #fff !important; }

/* Footer: Teal 50 strip, 13px italic caption. */
.ktt-cp .ktt-cp-disc {
	font-size: 13px !important;
	font-style: italic;
	line-height: 1.6 !important;
	color: var(--cp-caption) !important;
	margin: 0 !important;
	padding: 16px 20px 20px !important;
	background: var(--cp-teal-50) !important;
	border: 0 !important;
}

/* ── Offer editor ─────────────────────────────────────────────────────────── */
/*
 * A section label like the others (Katie, 2026-10-15); the arrow in front
 * is teal because it opens and closes, and the whole label turns teal on
 * hover.
 */
.ktt-cp .ktt-cp-editor summary.ktt-cp-editor__sum {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 1.2px !important;
	text-transform: uppercase !important;
	line-height: 1.4 !important;
	color: var(--cp-caption) !important;
	cursor: pointer;
	list-style: none;
}
.ktt-cp .ktt-cp-editor summary.ktt-cp-editor__sum:hover,
.ktt-cp .ktt-cp-editor summary.ktt-cp-editor__sum:focus-visible { color: var(--cp-teal) !important; }
.ktt-cp-editor summary.ktt-cp-editor__sum::-webkit-details-marker { display: none; }
.ktt-cp-editor summary.ktt-cp-editor__sum::before { content: "▸ "; color: var(--cp-teal); }
.ktt-cp-editor[open] summary.ktt-cp-editor__sum::before { content: "▾ "; color: var(--cp-teal); }
.ktt-cp-editor[open] .ktt-cp-tablewrap { margin-top: 12px; }
/* Quick scenarios sit behind the same arrow (Katie, 2026-10-15). */
.ktt-cp-scenarios[open] .ktt-cp-presets { margin-top: 12px !important; }

.ktt-cp .ktt-cp-table--edit { min-width: 460px; }
.ktt-cp .ktt-cp-table--edit td { padding: 8px 14px !important; vertical-align: middle !important; }
.ktt-cp .ktt-cp-ecard { font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; }
.ktt-cp .ktt-cp-table--edit input[type="number"] {
	width: 110px !important;
	height: 42px !important;
	padding: 0 10px !important;
	font-size: 15px !important;
}

.ktt-cp .ktt-cp-badge {
	display: inline-block !important;
	padding: 2px 7px !important;
	border-radius: 4px !important;
	background: var(--cp-teal-200) !important;
	color: var(--cp-ink) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .5px !important;
	text-transform: uppercase !important;
	vertical-align: 1px;
	white-space: nowrap !important;
}

.ktt-cp .ktt-cp-offertext--edited { font-style: italic; color: var(--cp-alert) !important; }

/* Light button: Teal 200, teal-black text, hover #C2DCE2. */
.ktt-cp button.ktt-cp-reset {
	margin: 12px 0 0 !important;
	padding: 10px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	background: var(--cp-teal-200) !important;
	color: var(--cp-ink) !important;
	border: 0 !important;
	border-radius: 4px !important;
	cursor: pointer;
	box-shadow: none !important;
}
.ktt-cp button.ktt-cp-reset:hover { background: #C2DCE2 !important; }

/* ── Two-offer card: the choose-offer box ─────────────────────────────────────
   Katie asked for this in red so readers notice they have a choice. Style
   guide warning look: pale red, 4px brick-red bar, teal-black text. The
   buttons stay teal, because teal is what readers click. */
.ktt-cp .ktt-cp-alt {
	background: var(--cp-alert-bg) !important;
	border: 0 !important;
	border-left: 4px solid var(--cp-alert) !important;
	border-radius: 0 !important;
	padding: 14px 18px !important;
}
.ktt-cp .ktt-cp-alt .ktt-cp-altlab {
	color: var(--cp-ink) !important;
	margin: 0 0 10px !important;
}
.ktt-cp .ktt-cp-alt .ktt-cp-seg { background: #fff !important; }
.ktt-cp .ktt-cp-alt .ktt-cp-seg button:hover { background: var(--cp-teal-50) !important; }
.ktt-cp .ktt-cp-alt .ktt-cp-seg button.is-on {
	background: var(--cp-teal) !important;
	color: #fff !important;
}

/* The selected offer's full wording, so a two-offer card is never shown
   without its offer language. */
.ktt-cp .ktt-cp-altoffer {
	margin-top: 10px !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var(--cp-ink) !important;
}

/* "This card has 2 offers…" — points at the box above rather than showing one
   offer as if it were the only one. */
.ktt-cp .ktt-cp-offertext--choose {
	color: var(--cp-alert) !important;
	font-weight: 600 !important;
}

/* ── Next-year timing warning + spacing tweaks (Katie, 2026-08-17) ────────── */
.ktt-cp-col { display: flex !important; flex-direction: column; min-width: 0 !important; }
.ktt-cp-col .ktt-cp-box { flex: 1 1 auto; }

.ktt-cp .ktt-cp-timingwarn {
	background: var(--cp-alert-bg) !important;
	border: 0 !important;
	border-left: 4px solid var(--cp-alert) !important;
	border-radius: 0 !important;
	padding: 14px 18px !important;
	margin: 0 0 12px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.55 !important;
	color: var(--cp-ink) !important;
}
.ktt-cp-timingwarn:empty { display: none !important; }

/* Katie asked for air above "Not sure which cards you can open?" */
.ktt-cp .ktt-cp-note--spaced { margin-top: 24px !important; }
/* And a little air under the one-personal-card line it follows. */
.ktt-cp .ktt-cp-note--spaced + .ktt-cp-note,
.ktt-cp .ktt-cp-panel > .ktt-cp-note:first-of-type { margin-bottom: 0 !important; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
	.ktt-cp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.ktt-cp-head { padding: 16px 14px 4px !important; }
	.ktt-cp .ktt-cp-head h2 { font-size: 20px !important; }
	.ktt-cp .ktt-cp-stamp { padding: 4px 14px 14px !important; }
	.ktt-cp .ktt-cp-notice { margin: 0 12px 14px !important; }
	.ktt-cp-body { margin: 0 8px !important; }
	.ktt-cp-panel { padding: 16px 14px !important; }
	.ktt-cp .ktt-cp-disc { padding: 14px 14px 16px !important; }
	.ktt-cp .ktt-cp-preset { flex: 1 1 100%; }
	.ktt-cp-ctl { flex: 1 1 100%; }
	.ktt-cp .ktt-cp-stat { flex: 1 1 100%; }
	.ktt-cp .ktt-cp-stat__val { font-size: 22px !important; }
	.ktt-cp .ktt-cp-seg { display: flex !important; width: 100%; }
	.ktt-cp .ktt-cp-seg button { flex: 1 1 auto; }
	.ktt-cp .ktt-cp-box { padding: 14px !important; }
	.ktt-cp .ktt-cp-detail .ktt-cp-panel__h { font-size: 18px !important; }
	.ktt-cp .ktt-cp-tracker__heldnote { margin-left: 0 !important; }
}