/**
 * Info Table — dedicated mobile presentation layer
 * -----------------------------------------------------------------------------
 * Scope:      .info-table-wrap (the block's existing wrapper — no markup change)
 * Applies at: max-width 860px only. Desktop CSS is never touched.
 * Depends on: nothing. Every selector sits inside .info-table-wrap: no resets,
 *             no global rules, no bare element selectors.
 *
 * Layout model on mobile
 * ----------------------
 * The desktop table is column-major (label column + one column per plan), so the
 * only stacking order the DOM supports without reordering markup is:
 *
 *   [ What's covered? ]  ← key card: feature names + their info buttons
 *   [ Basic ]            ← plan card: feature name (from data-title) : value
 *   [ Value ]
 *   [ Plus ]
 *   [ Premier ]
 *
 * Feature names are re-printed inside each plan card from the existing
 * data-title attributes, so no cell is ever ambiguous once it leaves the grid.
 * Nothing is hidden, collapsed or removed — every node in the original markup
 * is rendered and reachable.
 *
 * Theming: override the custom properties on .info-table-wrap to match
 * the site's brand. Nothing else needs editing.
 */

@media screen and (max-width: 860px) {

	/* -----------------------------------------------------------------------
	 * 1. Scope root + tokens
	 * -------------------------------------------------------------------- */

	.info-table-wrap.info-table-wrap.info-table-wrap {
		/* Palette — override these to brand the block. */
		--itm-ink:            #1b2733;
		--itm-ink-soft:       #5b6773;
		--itm-surface:        #ffffff;
		--itm-surface-sunken: #f5f7f9;
		--itm-rule:           #e2e7ec;
		--itm-rule-strong:    #cdd5dd;
		--itm-head-bg:        #17293b;
		--itm-head-fg:        #ffffff;
		--itm-key-bg:         #2f5d8a;
		--itm-key-fg:         #ffffff;
		--itm-accent:         #2f5d8a;
		--itm-flag-bg:        #fdf3dd;
		--itm-flag-fg:        #7a5a10;
		--itm-flag-rule:      #ecd9a8;
		--itm-bubble-bg:      #17293b;
		--itm-bubble-fg:      #ffffff;

		/* Metrics */
		--itm-gap:      14px;
		--itm-pad-x:    16px;
		--itm-radius:   12px;
		--itm-touch:    44px;

		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 0 !important;
		/* The desktop build may put the table in a horizontal scroller; on mobile
		   the content stacks, so no inner scroll context is wanted. */
		overflow: visible !important;
		-webkit-text-size-adjust: 100% !important;
		color: var(--itm-ink) !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap,
	.info-table-wrap.info-table-wrap.info-table-wrap *,
	.info-table-wrap.info-table-wrap.info-table-wrap *::before,
	.info-table-wrap.info-table-wrap.info-table-wrap *::after {
		box-sizing: border-box !important;
	}

	/* -----------------------------------------------------------------------
	 * 1b. Neutraliser
	 *
	 * Wipes the theme's own layout off every node in the block before this file
	 * rebuilds it. Without this, an existing responsive rule — typically a
	 * .line::before that absolutely positions the data-title label, or a
	 * match-height script writing inline heights — survives and drags the
	 * labels out of their rows.
	 *
	 * Only layout properties are reset. `content` is never touched, so no
	 * theme text or icon can be lost here. Everything this clears is put back
	 * deliberately by the rules below, which all outrank it.
	 * -------------------------------------------------------------------- */

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table,
	.info-table-wrap.info-table-wrap.info-table-wrap .info-table *,
	.info-table-wrap.info-table-wrap.info-table-wrap .info-table *::before,
	.info-table-wrap.info-table-wrap.info-table-wrap .info-table *::after {
		float: none !important;
		clear: none !important;
		position: static !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		transform: none !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		min-width: 0 !important;
		max-width: 100% !important;
		white-space: normal !important;
		text-indent: 0 !important;
		vertical-align: baseline !important;
		box-shadow: none !important;
		text-transform: none !important;
		writing-mode: horizontal-tb !important;
	}

	/* The theme's own tooltip arrow, if it has one, would otherwise be left
	   over as a stray shape next to the arrow this file draws. Decoration
	   only — no text lives in an ::after here. */
	.info-table-wrap.info-table-wrap.info-table-wrap .it-info__bubble::after {
		content: none !important;
		display: none !important;
	}

	/* -----------------------------------------------------------------------
	 * 2. Table shell → vertical stack
	 * -------------------------------------------------------------------- */

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
		overflow: visible !important;
		/* Neutralises any desktop grid/flex/table column definition. */
		grid-template-columns: none !important;
		grid-template-areas: none !important;
	}

	/* -----------------------------------------------------------------------
	 * 3. Columns → cards
	 * -------------------------------------------------------------------- */

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__col {
		display: block !important;
		float: none !important;
		position: static !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		flex: none !important;
		margin: 0 0 var(--itm-gap) !important;
		padding: 0 !important;
		border: 1px solid var(--itm-rule) !important;
		border-radius: var(--itm-radius) !important;
		background: var(--itm-surface) !important;
		/* Tooltips are absolutely positioned and must be free to sit outside
		   the card box, so this cannot be clipped. */
		overflow: visible !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__col:last-child {
		margin-bottom: 0 !important;
	}

	/* -----------------------------------------------------------------------
	 * 4. Card headers (column names)
	 *
	 * The desktop build toggles an .active class on these (tab behaviour).
	 * On mobile every card is open, so both states are styled identically —
	 * clicking a header can never change what is visible.
	 * -------------------------------------------------------------------- */

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__name,
	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__name.active {
		display: block !important;
		width: auto !important;
		margin: 0 !important;
		padding: 13px var(--itm-pad-x) !important;
		border: 0 !important;
		border-radius: calc(var(--itm-radius) - 1px) calc(var(--itm-radius) - 1px) 0 0 !important;
		background: var(--itm-head-bg) !important;
		color: var(--itm-head-fg) !important;
		font-size: 1.0625rem !important;
		line-height: 1.35 !important;
		font-weight: 700 !important;
		letter-spacing: 0.005em !important;
		text-align: left !important;
		cursor: default !important;
		overflow-wrap: break-word !important;
		word-break: normal !important;
		hyphens: auto !important;
	}

	/* The first column is the legend, not a plan — it gets its own colour so the
	   four purchasable tiers below read as a set. */
	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__col:first-child .info-table__name,
	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__col:first-child .info-table__name.active {
		background: var(--itm-key-bg) !important;
		color: var(--itm-key-fg) !important;
	}

	/* -----------------------------------------------------------------------
	 * 5. Card bodies
	 * -------------------------------------------------------------------- */

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__content,
	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__content.active {
		/* Forced open: the desktop tab script may leave .active off three of the
		   four plan columns, and none of them may be hidden here. */
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		max-height: none !important;
		width: auto !important;
		margin: 0 !important;
		padding: 2px var(--itm-pad-x) 6px !important;
		border: 0 !important;
		background: none !important;
		overflow: visible !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__col:first-child .info-table__content {
		background: var(--itm-surface-sunken) !important;
		border-radius: 0 0 calc(var(--itm-radius) - 1px) calc(var(--itm-radius) - 1px) !important;
	}

	/* -----------------------------------------------------------------------
	 * 6. Rows
	 * -------------------------------------------------------------------- */

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__content .line {
		position: relative !important;
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		justify-content: space-between !important;
		gap: 4px 14px !important;
		width: auto !important;
		min-width: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 12px 0 !important;
		border: 0 !important;
		border-top: 1px solid var(--itm-rule) !important;
		background: none !important;
		text-align: left !important;
		overflow: visible !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__content .line:first-child {
		border-top: 0 !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__content .line p {
		margin: 0 !important;
		overflow-wrap: break-word !important;
		word-break: normal !important;
	}

	/* -----------------------------------------------------------------------
	 * 7. Legend column rows: feature name + info button
	 * -------------------------------------------------------------------- */

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__col:first-child .line {
		align-items: center !important;
		flex-wrap: nowrap !important;
		padding-right: 0 !important;
		border-top-color: var(--itm-rule-strong) !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap .line__label {
		display: block !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
		width: auto !important;
		padding: 0 !important;
		font-size: 0.9375rem !important;
		line-height: 1.4 !important;
		font-weight: 600 !important;
		color: var(--itm-ink) !important;
	}

	/* -----------------------------------------------------------------------
	 * 8. Info button + tooltip
	 *
	 * The button is position:static so its bubble resolves against .line and can
	 * span the full row width — that is what guarantees it can never push past
	 * the viewport edge.
	 * -------------------------------------------------------------------- */

	.info-table-wrap.info-table-wrap.info-table-wrap .it-info {
		position: static !important;
		flex: 0 0 auto !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: var(--itm-touch) !important;
		height: var(--itm-touch) !important;
		/* Negative margin keeps the 44px touch target without inflating the row. */
		margin: -10px -10px -10px 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 50% !important;
		background: transparent !important;
		color: var(--itm-accent) !important;
		line-height: 0 !important;
		cursor: pointer !important;
		-webkit-appearance: none !important;
		appearance: none !important;
		-webkit-tap-highlight-color: transparent !important;
		touch-action: manipulation !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap .it-info:focus-visible {
		outline: 2px solid var(--itm-accent) !important;
		outline-offset: 2px !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap .it-info__icon {
		display: block !important;
		width: 21px !important;
		height: 21px !important;
		flex: 0 0 auto !important;
		/* Guards against any inherited width:100% stretching the circle. */
		max-width: none !important;
		aspect-ratio: 1 / 1 !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap .it-info__bubble {
		position: absolute !important;
		top: calc(100% - 6px) !important;
		left: 0 !important;
		right: 0 !important;
		bottom: auto !important;
		z-index: 30 !important;
		display: block !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 12px 14px !important;
		border: 0 !important;
		border-radius: 10px !important;
		background: var(--itm-bubble-bg) !important;
		color: var(--itm-bubble-fg) !important;
		box-shadow: 0 12px 28px rgba(23, 41, 59, 0.22) !important;
		font-size: 0.875rem !important;
		line-height: 1.55 !important;
		font-weight: 400 !important;
		text-align: left !important;
		/* The source keeps its paragraph break as a literal newline. */
		white-space: pre-line !important;
		overflow-wrap: break-word !important;
		opacity: 0 !important;
		visibility: hidden !important;
		transform: translateY(-4px) !important;
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s !important;
		pointer-events: none !important;
	}

	/* Pointer, aligned under the button at the right edge of the row. */
	.info-table-wrap.info-table-wrap.info-table-wrap .it-info__bubble::before {
		content: "" !important;
		position: absolute !important;
		top: -6px !important;
		right: 14px !important;
		width: 12px !important;
		height: 12px !important;
		background: var(--itm-bubble-bg) !important;
		border-radius: 2px 0 0 0 !important;
		transform: rotate(45deg) !important;
	}

	/* Open state. Three independent triggers, deliberately kept apart:
	   - .is-open      : set by the optional script (tap / Enter / Space).
	   - :focus        : no-JS fallback only. When the script is running the
	                     wrapper carries .itm-js, and focus must NOT force the
	                     bubble open or the second tap could never close it.
	   - :hover        : real hover devices only (stylus/mouse on a small
	                     viewport), never emulated hover on touch. */
	.info-table-wrap.info-table-wrap.info-table-wrap .it-info.is-open .it-info__bubble,
	.info-table-wrap.info-table-wrap.info-table-wrap:not(.itm-js) .it-info:focus .it-info__bubble {
		opacity: 1 !important;
		visibility: visible !important;
		transform: translateY(0) !important;
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s !important;
	}

	@media (hover: hover) and (pointer: fine) {

		.info-table-wrap.info-table-wrap.info-table-wrap .it-info:hover .it-info__bubble {
			opacity: 1 !important;
			visibility: visible !important;
			transform: translateY(0) !important;
			transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s !important;
		}
	}

	/* Open state on the trigger itself, so a tapped row reads as active. */
	.info-table-wrap.info-table-wrap.info-table-wrap .it-info.is-open {
		background: rgba(47, 93, 138, 0.12) !important;
	}

	/* Last row in the legend card: bubble opens upward so it stays on screen
	   next to the card rather than floating over the Basic card header. */
	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__col:first-child .line:last-child .it-info__bubble {
		top: auto !important;
		bottom: calc(100% - 6px) !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__col:first-child .line:last-child .it-info__bubble::before {
		top: auto !important;
		bottom: -6px !important;
		border-radius: 0 0 2px 0 !important;
	}

	/* -----------------------------------------------------------------------
	 * 9. Plan column rows: feature name (from data-title) + value
	 * -------------------------------------------------------------------- */

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__col:not(:first-child) .line[data-title]::before {
		content: attr(data-title) !important;
		flex: 1 1 8.5rem !important;
		min-width: 0 !important;
		padding-top: 1px !important;
		font-size: 0.875rem !important;
		line-height: 1.45 !important;
		font-weight: 500 !important;
		color: var(--itm-ink-soft) !important;
		text-align: left !important;
		overflow-wrap: break-word !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__col:not(:first-child) .line > p {
		flex: 0 1 auto !important;
		margin-left: auto !important;
		max-width: 100% !important;
		font-size: 0.9375rem !important;
		line-height: 1.45 !important;
		font-weight: 700 !important;
		color: var(--itm-ink) !important;
		text-align: right !important;
	}

	/* "Optional extra" qualifier — reads as a status marker, not as emphasis
	   inside the figure it precedes. Sentence case is preserved as authored. */
	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__col:not(:first-child) .line > p > strong:first-child {
		display: inline-block !important;
		margin-bottom: 5px !important;
		padding: 2px 9px !important;
		border: 1px solid var(--itm-flag-rule) !important;
		border-radius: 999px !important;
		background: var(--itm-flag-bg) !important;
		color: var(--itm-flag-fg) !important;
		font-size: 0.75rem !important;
		line-height: 1.4 !important;
		font-weight: 600 !important;
		letter-spacing: 0.005em !important;
		white-space: nowrap !important;
	}

	/* -----------------------------------------------------------------------
	 * 10. Motion preference
	 * -------------------------------------------------------------------- */

	@media (prefers-reduced-motion: reduce) {

		.info-table-wrap.info-table-wrap.info-table-wrap .it-info__bubble {
			transition: none !important;
			transform: none !important;
		}

		.info-table-wrap.info-table-wrap.info-table-wrap .it-info:hover .it-info__bubble,
		.info-table-wrap.info-table-wrap.info-table-wrap .it-info:focus .it-info__bubble,
		.info-table-wrap.info-table-wrap.info-table-wrap .it-info:focus-visible .it-info__bubble,
		.info-table-wrap.info-table-wrap.info-table-wrap .it-info.is-open .it-info__bubble {
			transform: none !important;
		}
	}
}

/* ---------------------------------------------------------------------------
 * 11. Narrow phones — feature name above value, both left aligned.
 *     Two columns stop being comfortable once "Death from injury or illness"
 *     has to share a 320–400px row with "Insured value of pet".
 * ------------------------------------------------------------------------ */

@media screen and (max-width: 430px) {

	.info-table-wrap.info-table-wrap.info-table-wrap {
		--itm-pad-x: 14px;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__col:not(:first-child) .line {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 3px !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__col:not(:first-child) .line[data-title]::before {
		flex: 0 0 auto !important;
		width: 100% !important;
		padding-top: 0 !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__col:not(:first-child) .line > p {
		margin-left: 0 !important;
		width: 100% !important;
		text-align: left !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__name,
	.info-table-wrap.info-table-wrap.info-table-wrap .info-table__name.active {
		font-size: 1rem !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap .it-info__bubble {
		font-size: 0.8438rem !important;
		padding: 11px 13px !important;
	}
}

/* ===========================================================================
 * 12. Header colour hardening + plan tabs
 *
 * Appended after everything above so it wins on source order as well as
 * specificity. Two jobs:
 *
 * (a) The header text was still resolving dark-on-dark on the four plan cards
 *     while the legend header rendered white — the legend rule carries an extra
 *     :first-child and therefore outranked whatever theme rule was winning on
 *     the others. These selectors are raised to seven classes, and they also set
 *     -webkit-text-fill-color, which overrides `color` outright on WebKit and is
 *     a common leftover from gradient-text or tab styling.
 *
 * (b) Basic / Value / Plus / Premier become toggles. "What's covered?" is the
 *     first column and is explicitly excluded from all of it — it stays open,
 *     stays styled as the legend, and gets no control affordance.
 *
 * The collapse only applies when the wrapper carries .itm-js, so with the
 * script absent every panel stays open exactly as before.
 * ======================================================================== */

@media screen and (max-width: 860px) {

	/* (a) Header text — force it visible past anything local. --------------- */

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table .info-table__col .info-table__name.info-table__name,
	.info-table-wrap.info-table-wrap.info-table-wrap .info-table .info-table__col .info-table__name.info-table__name.active {
		color: var(--itm-head-fg) !important;
		-webkit-text-fill-color: var(--itm-head-fg) !important;
		background-color: var(--itm-head-bg) !important;
		background-image: none !important;
		-webkit-background-clip: border-box !important;
		background-clip: border-box !important;
		text-shadow: none !important;
		opacity: 1 !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap .info-table .info-table__col:first-child .info-table__name.info-table__name,
	.info-table-wrap.info-table-wrap.info-table-wrap .info-table .info-table__col:first-child .info-table__name.info-table__name.active {
		color: var(--itm-key-fg) !important;
		-webkit-text-fill-color: var(--itm-key-fg) !important;
		background-color: var(--itm-key-bg) !important;
	}

	/* (b) Plan headers become controls. First column deliberately excluded. -- */

	.info-table-wrap.info-table-wrap.info-table-wrap.itm-js .info-table .info-table__col:not(:first-child) .info-table__name.info-table__name {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 14px !important;
		padding-top: 15px !important;
		padding-bottom: 15px !important;
		cursor: pointer !important;
		-webkit-user-select: none !important;
		user-select: none !important;
		-webkit-tap-highlight-color: transparent !important;
		touch-action: manipulation !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap.itm-js .info-table .info-table__col:not(:first-child) .info-table__name.info-table__name:focus-visible {
		outline: 2px solid var(--itm-head-fg) !important;
		outline-offset: -4px !important;
	}

	/* Chevron: the only way a tapped header reads as a control. */
	.info-table-wrap.info-table-wrap.info-table-wrap.itm-js .info-table .info-table__col:not(:first-child) .info-table__name.info-table__name::after {
		content: "" !important;
		display: block !important;
		flex: 0 0 auto !important;
		width: 10px !important;
		height: 10px !important;
		margin-top: -4px !important;
		border-right: 2px solid currentColor !important;
		border-bottom: 2px solid currentColor !important;
		border-top: 0 !important;
		border-left: 0 !important;
		border-radius: 1px !important;
		transform: rotate(45deg) !important;
		transition: transform 0.2s ease !important;
		opacity: 0.85 !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap.itm-js .info-table .info-table__col:not(:first-child).itm-open .info-table__name.info-table__name::after {
		margin-top: 4px !important;
		transform: rotate(-135deg) !important;
	}

	/* Closed panel. */
	.info-table-wrap.info-table-wrap.info-table-wrap.itm-js .info-table .info-table__col:not(:first-child):not(.itm-open) .info-table__content,
	.info-table-wrap.info-table-wrap.info-table-wrap.itm-js .info-table .info-table__col:not(:first-child):not(.itm-open) .info-table__content.active {
		display: none !important;
	}

	/* Open panel — must also beat the closed rule's siblings on source order. */
	.info-table-wrap.info-table-wrap.info-table-wrap.itm-js .info-table .info-table__col:not(:first-child).itm-open .info-table__content,
	.info-table-wrap.info-table-wrap.info-table-wrap.itm-js .info-table .info-table__col:not(:first-child).itm-open .info-table__content.active {
		display: block !important;
	}

	/* A collapsed card is nothing but its header, so it needs all four corners. */
	.info-table-wrap.info-table-wrap.info-table-wrap.itm-js .info-table .info-table__col:not(:first-child):not(.itm-open) .info-table__name.info-table__name {
		border-radius: calc(var(--itm-radius) - 1px) !important;
	}

	.info-table-wrap.info-table-wrap.info-table-wrap.itm-js .info-table .info-table__col:not(:first-child):not(.itm-open) {
		margin-bottom: 10px !important;
	}

	@media (prefers-reduced-motion: reduce) {

		.info-table-wrap.info-table-wrap.info-table-wrap.itm-js .info-table .info-table__col:not(:first-child) .info-table__name.info-table__name::after {
			transition: none !important;
		}
	}
}