/**
 * THP Pricing Calculator styles.
 *
 * Moved verbatim from the original Elementor HTML widget. All rules are
 * scoped under #thp-pricing.
 */

#thp-pricing {
	--thp-main: #0090a5;
	--thp-main-dk: #00707f;
	--thp-secondary: #162d53;
	--thp-bg1: #cce9ed;
	--thp-bg2: #fff2d8;
	--thp-accent: #f15f3a;
	--thp-accent-dk: #d6482a;
	/* primary "Get started" button; same values as the accent, but edit these to restyle the button only */
	--thp-btn-bg: #f15f3a;
	--thp-btn-bg-hover: #d6482a;
	--thp-btn-text: #fff;
	--thp-white: #FFFFFF;
	--thp-slate: #5C6B7A;
	--thp-line: #cfe3e6;
	--thp-shadow: 0 1px 2px rgba(22, 45, 83, .05), 0 8px 28px rgba(22, 45, 83, .07);
	--thp-shadow-lg: 0 2px 6px rgba(22, 45, 83, .08), 0 18px 50px rgba(22, 45, 83, .14);
	--thp-radius: 14px;
	font-family: 'Roboto', system-ui, sans-serif;
	color: var(--thp-secondary);
	line-height: 1.5;
	max-width: 1500px;
	margin: 0 auto;
	padding: 0px;
	box-sizing: border-box;
}

#thp-pricing * {
	box-sizing: border-box
}

#thp-pricing .thp-mono {
	font-family: 'Roboto', monospace
}

/* configurator bar */
#thp-pricing .thp-configurator {
	position: relative;
	/* above the "not available" notes (z-index 8) in the tier cards, so the country list overlays them */
	z-index: 9;
	background: var(--thp-white);
	border: 1px solid var(--thp-line);
	border-radius: var(--thp-radius);
	box-shadow: var(--thp-shadow-lg);
	padding: 22px 26px;
	display: flex;
	justify-content: center;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

#thp-pricing .thp-cfg-block {
	width: 100%
}

#thp-pricing .thp-cfg-block .thp-cfg-label {
	font-family: 'Roboto';
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--thp-slate);
	margin-bottom: 10px;
	display: flex;
	gap: 8px;
	align-items: center;
}

#thp-pricing .thp-cfg-label .thp-q {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid var(--thp-line);
	color: var(--thp-slate);
	font-size: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: help;
	font-family: 'Roboto';
}

#thp-pricing .thp-picker {
	margin-top: 18px
}

#thp-pricing .thp-picker-label {
	margin-bottom: 10px
}

#thp-pricing .thp-seg {
	display: flex;
	background: #f7f7f7;
	border-radius: 10px;
	padding: 4px;
	gap: 4px;
	overflow: hidden
}

#thp-pricing .thp-seg button {
	flex: 1;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: 'Roboto';
	font-size: 14px;
	font-weight: 500;
	color: var(--thp-secondary);
	padding: 10px 8px;
	border-radius: 7px;
	transition: .18s;
	white-space: nowrap;
	box-shadow: none !important;
	text-transform: none !important;
	text-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

#thp-pricing .thp-seg button .thp-cap {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: var(--thp-slate);
	margin-top: 2px;
	text-transform: none !important
}

#thp-pricing .thp-seg button[aria-pressed="true"] {
	background: var(--thp-white);
	color: var(--thp-secondary);
	box-shadow: var(--thp-shadow) !important
}

#thp-pricing .thp-seg button[aria-pressed="true"] .thp-cap {
	color: var(--thp-accent-dk)
}

/* country combobox: same slot, tray and 56px control height as the select it replaced */
#thp-pricing .thp-combo {
	position: relative;
	background: #f7f7f7;
	border-radius: 10px;
	padding: 4px;
}

#thp-pricing .thp-combo-field {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding: 0 8px 0 14px;
	background: var(--thp-white);
	border-radius: 7px;
	box-shadow: var(--thp-shadow);
	color: var(--thp-secondary);
	cursor: text
}

#thp-pricing .thp-combo-field:focus-within {
	outline: 2px solid var(--thp-main);
	outline-offset: 1px
}

#thp-pricing .thp-combo-icon {
	flex-shrink: 0;
	color: var(--thp-slate);
	pointer-events: none
}

/* explicit reset: the theme and Elementor style bare inputs and buttons */
#thp-pricing .thp-combo-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	outline: 0 !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'Roboto';
	/* 16px: smaller sizes make iOS zoom the page on focus */
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--thp-secondary);
	text-transform: none
}

#thp-pricing .thp-combo-input::placeholder {
	color: var(--thp-slate);
	font-weight: 400;
	opacity: 1
}

#thp-pricing .thp-combo-clear {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 50%;
	background: transparent;
	color: var(--thp-slate);
	box-shadow: none !important;
	text-transform: none !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none
}

#thp-pricing .thp-combo-clear:hover {
	background: #f7f7f7;
	color: var(--thp-secondary)
}

#thp-pricing .thp-combo-clear:focus-visible {
	outline: 2px solid var(--thp-main);
	outline-offset: 1px
}

/* overlay: absolutely positioned so opening it never moves the layout; no transition on it
   (a past bug: animated visibility left controls ignoring clicks) */
#thp-pricing .thp-combo-popup {
	position: absolute;
	z-index: 30;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 6px;
	overflow: hidden;
	background: var(--thp-white);
	border: 1px solid var(--thp-line);
	border-radius: var(--thp-radius);
	box-shadow: var(--thp-shadow-lg)
}

#thp-pricing .thp-combo-list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 4px;
	max-height: min(320px, 50vh);
	overflow-y: auto;
	overscroll-behavior: contain
}

#thp-pricing .thp-combo-option {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--thp-secondary);
	cursor: pointer;
	list-style: none
}

#thp-pricing .thp-combo-option.is-active {
	background: var(--thp-bg1)
}

#thp-pricing .thp-combo-option[aria-selected="true"] {
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--thp-main)
}

#thp-pricing .thp-combo-alias {
	font-size: 12px;
	font-weight: 400;
	color: var(--thp-slate)
}

#thp-pricing .thp-combo-mark {
	background: var(--thp-bg2);
	color: var(--thp-accent-dk);
	border-radius: 3px
}

#thp-pricing .thp-combo-empty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px 10px 16px;
	font-size: 14px;
	color: var(--thp-slate)
}

#thp-pricing .thp-combo-other {
	flex-shrink: 0;
	min-height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--thp-line) !important;
	border-radius: 9px;
	background: transparent;
	box-shadow: none !important;
	font-family: 'Roboto';
	font-size: 14px;
	font-weight: 600;
	color: var(--thp-secondary);
	text-transform: none !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none
}

#thp-pricing .thp-combo-other:hover {
	border-color: var(--thp-secondary) !important;
	background: var(--thp-bg1)
}

#thp-pricing .thp-combo-other:focus-visible {
	outline: 2px solid var(--thp-main);
	outline-offset: 1px
}

#thp-pricing .thp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0
}

#thp-pricing .thp-tiers-section {
	padding-top: 32px
}

/* tier cards */
#thp-pricing .thp-tiers {
	display: grid;
	/* Three tracks, each exactly one column of the former four-column grid. */
	grid-template-columns: repeat(3, calc((100% - 48px) / 4));
	justify-content: center;
	gap: 16px;
	align-items: stretch
}

#thp-pricing .thp-card {
	background: var(--thp-white);
	border: 1px solid var(--thp-line);
	border-radius: var(--thp-radius);
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: .2s;
	height: 100%;
}

#thp-pricing .thp-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--thp-shadow)
}

#thp-pricing .thp-card.thp-feature {
	border-color: var(--thp-main);
	box-shadow: var(--thp-shadow-lg)
}

#thp-pricing .thp-ribbon {
	position: absolute;
	top: -11px;
	left: 22px;
	background: var(--thp-main);
	color: #fff;
	font-family: 'Roboto';
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 20px;
	z-index: 7;
}

#thp-pricing .thp-tier-name {
	font-family: 'Roboto';
	font-weight: 600;
	font-size: 20px;
	display: flex;
	align-items: center;
	gap: 8px
}

#thp-pricing .thp-tier-tag {
	font-size: 13px;
	color: var(--thp-slate);
	margin-top: 6px;
	min-height: 38px
}

/* Temporarily hidden per marketing; delete this rule to bring the tier descriptions back. */
#thp-pricing .thp-tier-tag {
	display: none
}

#thp-pricing .thp-price-row {
	margin: 18px 0 4px;
	display: flex;
	align-items: baseline;
	gap: 6px
}

#thp-pricing .thp-from {
	font-size: 12px;
	font-weight: 600;
	color: var(--thp-accent-dk);
	text-transform: uppercase;
	letter-spacing: .4px
}

#thp-pricing .thp-price {
	font-family: 'Roboto';
	font-weight: 700;
	font-size: 34px;
	letter-spacing: -1px
}

#thp-pricing .thp-price .thp-cur {
	font-size: 20px;
	font-weight: 600;
	vertical-align: top
}

#thp-pricing .thp-per {
	font-size: 13px;
	color: var(--thp-slate)
}

#thp-pricing .thp-price-note {
	font-size: 12px;
	color: var(--thp-slate);
	min-height: 32px;
	margin-bottom: 4px
}

#thp-pricing .thp-scope-chip {
	font-family: 'Roboto';
	font-size: 11px;
	color: var(--thp-accent-dk);
	background: var(--thp-bg2);
	border-radius: 6px;
	padding: 3px 8px;
	display: inline-block;
	margin-top: 6px;
}

#thp-pricing .thp-btn {
	display: block;
	text-align: center;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 15px;
	padding: 13px;
	border-radius: 9px;
	margin: 20px 0 18px;
	cursor: pointer;
	border: 0;
	width: 100%;
	transition: .16s;
	font-family: 'Roboto';
	box-shadow: none !important;
	text-transform: none !important;
	text-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

#thp-pricing .thp-btn,
#thp-pricing .thp-btn:visited {
	color: inherit
}

#thp-pricing .thp-btn-primary {
	background: var(--thp-btn-bg);
	color: var(--thp-btn-text) !important
}

#thp-pricing .thp-btn-primary:hover {
	background: var(--thp-btn-bg-hover)
}

#thp-pricing .thp-btn-ghost {
	background: transparent;
	color: var(--thp-secondary) !important;
	border: 1px solid var(--thp-line) !important
}

#thp-pricing .thp-btn-ghost:hover {
	border-color: var(--thp-secondary);
	background: var(--thp-bg1)
}

#thp-pricing .thp-incl {
	list-style: none;
	font-size: 13.5px;
	display: flex;
	flex-direction: column;
	gap: 11px
}

#thp-pricing .thp-incl li {
	display: flex;
	gap: 5px;
	align-items: flex-start;
	color: var(--thp-secondary)
}

#thp-pricing .thp-incl .thp-ic {
	color: var(--thp-main);
	flex-shrink: 0;
	margin-top: 1px
}

#thp-pricing .thp-incl .thp-term {
	border-bottom: 1px dotted var(--thp-line);
	cursor: help
}

#thp-pricing .thp-incl .thp-muted {
	color: var(--thp-slate)
}

/* country-only unavailability: blur, no text overlay */
#thp-pricing .thp-card-body {
	transition: filter .2s, opacity .2s
}

#thp-pricing .thp-card.thp-blurred .thp-card-body {
	filter: blur(2.5px);
	opacity: .60;
	pointer-events: none;
	user-select: none
}

/* inert "Get started" twin, shown when a tier has no link */
#thp-pricing .thp-btn-disabled {
	background: #f7f7f7;
	color: var(--thp-slate) !important;
	border: 1px solid var(--thp-line) !important;
	cursor: not-allowed;
	opacity: .8
}

/* "not available" note over the blurred card body — sits outside the blur */
#thp-pricing .thp-unavailable-note {
	position: absolute;
	top: 50%;
	left: 18px;
	right: 18px;
	transform: translateY(-50%);
	z-index: 8;
	background: var(--thp-white);
	color: var(--thp-secondary);
	border: 1px solid var(--thp-line);
	border-radius: 10px;
	box-shadow: var(--thp-shadow-lg);
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center
}

/* picker slot: the select, the region group buttons and the Worldwide panel share
   one grid cell, so the slot is always as tall as the tallest of them and switching
   scope never shifts the layout. Inactive items keep their size but are invisible. */
#thp-pricing .thp-picker-slot {
	display: grid
}

#thp-pricing .thp-picker-slot > .thp-slot-item {
	grid-area: 1 / 1;
	align-self: start
}

#thp-pricing .thp-picker-slot > .thp-slot-item[inert] {
	visibility: hidden
}

/* never animate the swap: `transition: .18s` on .thp-seg button would otherwise fade the
   inherited visibility, leaving the new control unclickable and the old one showing briefly */
#thp-pricing .thp-picker-slot > .thp-slot-item,
#thp-pricing .thp-picker-slot > .thp-slot-item * {
	transition-property: background-color, border-color, color, box-shadow, transform, opacity
}

/* region step 1: group buttons (inherit the .thp-seg segmented style) */
#thp-pricing .thp-region-groups button {
	min-height: 48px
}

/* region step 2: the chosen group's variation cards */
/* small top margin: the stacked slot above already reserves the Worldwide panel's height */
#thp-pricing .thp-region-panel {
	margin-top: 6px
}

/* region step 2, 'compact' style (default): the group row's segmented pills,
   title + subtitle (.thp-cap, as in the coverage tabs). Subtitles may wrap. */
#thp-pricing .thp-region-blocks {
	flex-wrap: wrap
}

#thp-pricing .thp-region-blocks button {
	white-space: normal;
	line-height: 1.25;
	padding: 9px 8px;
	min-width: 0
}

/* region step 2, 'cards' style (inactive by default, see thp_get_variation_picker_style()) */
#thp-pricing .thp-region-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px
}

#thp-pricing .thp-region-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	padding: 12px 14px;
	background: var(--thp-white);
	border: 1px solid var(--thp-line);
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(22, 45, 83, .04) !important;
	font-family: 'Roboto';
	color: var(--thp-secondary);
	text-align: left;
	text-transform: none !important;
	text-shadow: none !important;
	cursor: pointer;
	transition: border-color .16s, box-shadow .16s, transform .16s;
	-webkit-appearance: none;
	appearance: none
}

#thp-pricing .thp-region-card:hover {
	border-color: var(--thp-main);
	transform: translateY(-1px);
	box-shadow: var(--thp-shadow) !important
}

#thp-pricing .thp-region-card[aria-pressed="true"] {
	border: 2px solid var(--thp-main);
	padding: 11px 13px;
	box-shadow: 0 0 0 2px var(--thp-bg1) !important
}

#thp-pricing .thp-region-card:focus-visible {
	outline: 2px solid var(--thp-main);
	outline-offset: 1px
}

#thp-pricing .thp-region-card-img {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	object-fit: contain
}

#thp-pricing .thp-region-card-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0
}

#thp-pricing .thp-region-card-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2
}

#thp-pricing .thp-region-card-subtitle {
	font-size: 12px;
	line-height: 1.25;
	color: var(--thp-slate)
}

#thp-pricing .thp-region-card-coverage {
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--thp-slate)
}

#thp-pricing .thp-region-card-price {
	margin-top: 4px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1
}

#thp-pricing .thp-region-card-from {
	font-size: 11px;
	font-weight: 600;
	color: var(--thp-accent-dk);
	text-transform: uppercase;
	letter-spacing: .4px
}

/* Worldwide panel: a feature highlight in the tier-card language
   (card radius + shadow), accent icon, two-tier copy, faint dot texture */
#thp-pricing .thp-world-panel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	overflow: hidden;
	background: var(--thp-bg2);
	border: 1px solid var(--thp-line);
	border-radius: var(--thp-radius);
	box-shadow: var(--thp-shadow);
	color: var(--thp-secondary)
}

/* dot grid in the accent colour, fading in towards the right edge */
#thp-pricing .thp-world-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(241, 95, 58, .22) 1.2px, transparent 1.6px);
	background-size: 12px 12px;
	-webkit-mask-image: linear-gradient(to right, transparent 35%, #000 100%);
	mask-image: linear-gradient(to right, transparent 35%, #000 100%);
	pointer-events: none
}

#thp-pricing .thp-world-icon {
	position: relative;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--thp-accent);
	color: var(--thp-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 5px rgba(241, 95, 58, .14)
}

#thp-pricing .thp-world-icon svg {
	display: block
}

#thp-pricing .thp-world-copy {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0
}

#thp-pricing .thp-world-headline {
	font-family: 'Roboto';
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.2px
}

#thp-pricing .thp-world-subtext {
	font-size: 13px;
	line-height: 1.4;
	color: var(--thp-slate)
}

@media(max-width:560px) {
	#thp-pricing .thp-region-cards {
		grid-template-columns: 1fr
	}

	#thp-pricing .thp-region-blocks button {
		flex: 1 1 calc(50% - 2px)
	}
}

@media(max-width:480px) {
	#thp-pricing .thp-world-panel {
		padding: 14px 14px;
		gap: 12px
	}

	#thp-pricing .thp-world-icon {
		width: 40px;
		height: 40px
	}

	#thp-pricing .thp-world-headline {
		font-size: 15px
	}
}

/* tooltip */
#thp-pricing [data-tip] {
	position: relative
}

#thp-pricing [data-tip]:hover::after {
	content: attr(data-tip);
	position: absolute;
	bottom: 135%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--thp-secondary);
	color: var(--thp-bg1);
	font-family: 'Roboto';
	font-weight: 400;
	font-size: 12px;
	padding: 9px 12px;
	border-radius: 8px;
	width: 210px;
	line-height: 1.4;
	z-index: 20;
	box-shadow: var(--thp-shadow-lg);
	text-align: left;
}

#thp-pricing [data-tip]:hover::before {
	content: "";
	position: absolute;
	bottom: 135%;
	left: 50%;
	transform: translateX(-50%) translateY(6px) rotate(45deg);
	width: 8px;
	height: 8px;
	background: var(--thp-secondary);
	z-index: 20;
}

@media(max-width:900px) {
	#thp-pricing .thp-tiers {
		grid-template-columns: repeat(2, 1fr)
	}

	/* Odd third card: same width as the others, centered on its own row. */
	#thp-pricing .thp-tiers > .thp-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - 16px) / 2)
	}

	#thp-pricing .thp-tiers-section {
		padding-top: 56px
	}
}

@media(max-width:560px) {
	#thp-pricing .thp-tiers {
		grid-template-columns: 1fr
	}

	#thp-pricing .thp-tiers > .thp-card:last-child:nth-child(odd) {
		width: auto
	}
}

@media(max-width:480px) {
	#thp-pricing {
		padding: 0 14px
	}

	#thp-pricing .thp-configurator {
		padding: 16px 14px;
		max-width: 100%
	}

	#thp-pricing .thp-seg button {
		white-space: normal;
		font-size: 12px;
		padding: 9px 4px;
		line-height: 1.25
	}

	#thp-pricing .thp-seg button .thp-cap {
		font-size: 9.5px;
		margin-top: 3px
	}

	#thp-pricing .thp-incl {
		gap: 7px
	}

	#thp-pricing .thp-incl li {
		gap: 6px
	}
}

@media(prefers-reduced-motion:reduce) {
	#thp-pricing * {
		transition: none !important
	}
}

/* the hidden attribute must win over component display rules (.thp-btn, .thp-cfg-label, ...); kept last */
#thp-pricing [hidden] {
	display: none !important
}
/* Temporarily hidden per marketing; delete this rule to bring it back. */
#thp-pricing .thp-ribbon { display: none; }