/* Scoped reset, matching .rexa-pricing-widget's approach in pricing-widget.css */
.askrexa-agency-pricing,
.askrexa-agency-pricing *,
.askrexa-agency-pricing *:before,
.askrexa-agency-pricing *:after {
	box-sizing: border-box !important;
	font-family: 'Now', sans-serif !important;
}

/* No focus outline anywhere inside this widget. */
.askrexa-agency-pricing * {
	outline: none !important;
}

.askrexa-agency-pricing *:focus,
.askrexa-agency-pricing *:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.askrexa-agency-pricing {
	--askrexa-ink: #1a1a1a;
	--askrexa-dark: #2b2b2b;
	--askrexa-muted: #666666;
	--askrexa-hairline: #e5e5e5;
	width: 100% !important;
	color: var(--askrexa-ink) !important;
}

.askrexa-ap-layout {
	display: grid !important;
	grid-template-columns: 1.6fr 1fr !important;
	gap: 32px !important;
	align-items: stretch !important;
	width: 100% !important;
}

.askrexa-ap-form-col,
.askrexa-ap-summary-col {
	width: 100% !important;
}

/* Let the success card stretch to match the summary column's height instead
   of sitting short/tall on its own — the form itself keeps its natural
   height across steps, this only affects the post-submit state. */
.askrexa-ap-form-col {
	display: flex !important;
	flex-direction: column !important;
}

/* Progress dots — reads as "step N of 5 on a guided journey" rather than a
   bureaucratic loading bar. */
.askrexa-ap-progress-row {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin-bottom: 32px !important;
}

.askrexa-ap-progress-label {
	font-size: 12.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	color: var(--askrexa-muted) !important;
}

.askrexa-ap-progress-dots {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.askrexa-ap-progress-dot {
	width: 8px !important;
	height: 8px !important;
	border-radius: 999px !important;
	background-color: var(--askrexa-hairline) !important;
	transition: background-color 0.3s ease, width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease !important;
}

.askrexa-ap-progress-dot.is-done {
	background-color: var(--askrexa-dark) !important;
	width: 8px !important;
}

.askrexa-ap-progress-dot.is-active {
	background-color: var(--askrexa-dark) !important;
	width: 22px !important;
}

/* Card container for the form */
.askrexa-ap-form {
	border: 1px solid var(--askrexa-ink) !important;
	border-radius: 32px !important;
	background-color: rgba(255, 255, 255, 0.6) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	padding: 44px 40px !important;
}

.askrexa-ap-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.askrexa-ap-step[hidden] {
	display: none !important;
}

/* Guided-scene transition: each step slides/fades in as its own moment
   rather than snapping into view. JS toggles .is-entering off on the next
   frame after removing [hidden]. */
.askrexa-ap-step {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1), transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.askrexa-ap-step.is-entering {
	opacity: 0 !important;
	transform: translateY(10px) !important;
}

.askrexa-ap-step-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 14px !important;
	background-color: rgba(26, 26, 26, 0.05) !important;
	font-size: 20px !important;
	line-height: 1 !important;
	margin-bottom: 16px !important;
}

.askrexa-ap-step-icon::before {
	content: "" !important;
	display: block !important;
	width: 0 !important;
	height: 0 !important;
}

.askrexa-ap-step-icon img {
	align-self: center !important;
	width: 20px !important;
	height: 20px !important;
	object-fit: contain !important;
}

.askrexa-ap-step-hint {
	font-size: 13.5px !important;
	font-weight: 400 !important;
	color: var(--askrexa-muted) !important;
	margin: 14px 0 0 0 !important;
	min-height: 18px !important;
	transition: opacity 0.2s ease !important;
}

.askrexa-ap-step-title {
	font-size: 24px !important;
	line-height: 1.25em !important;
	font-weight: 500 !important;
	letter-spacing: -0.03em !important;
	color: var(--askrexa-ink) !important;
	margin: 0 0 8px 0 !important;
}

.askrexa-ap-step-desc {
	font-size: 15px !important;
	font-weight: 300 !important;
	color: var(--askrexa-muted) !important;
	line-height: 1.4 !important;
	margin: 0 0 24px 0 !important;
}

.askrexa-ap-step-value {
	font-size: 34px !important;
	font-weight: 700 !important;
	letter-spacing: -0.03em !important;
	color: var(--askrexa-ink) !important;
	margin: 16px 0 28px 0 !important;
}

.askrexa-ap-step-value-unit {
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: normal !important;
	color: var(--askrexa-muted) !important;
}

/* Sliders — native range inputs, restyled, kept keyboard accessible.
   The track height must be set on the ::-webkit-slider-runnable-track /
   ::-moz-range-track pseudo-elements themselves — Chrome and Firefox
   both ignore height set on the bare <input>, which is why the track
   looked thick no matter what height was set on .askrexa-ap-slider. */
.askrexa-ap-slider {
	--askrexa-slider-fill: 0%;
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 100% !important;
	height: 22px !important;
	background: transparent !important;
	background-image: none !important;
	outline: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Track is a gradient split at --askrexa-slider-fill (set by JS to match
   the thumb's exact travel position) so the filled portion reads as solid
   black up to the dot, with the remainder in the hairline color. */
.askrexa-ap-slider::-webkit-slider-runnable-track {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 100% !important;
	height: 6px !important;
	border-radius: 999px !important;
	background: linear-gradient(to right, #000000 var(--askrexa-slider-fill), var(--askrexa-hairline) var(--askrexa-slider-fill)) !important;
}

.askrexa-ap-slider::-moz-range-track {
	width: 100% !important;
	height: 6px !important;
	border-radius: 999px !important;
	background: linear-gradient(to right, #000000 var(--askrexa-slider-fill), var(--askrexa-hairline) var(--askrexa-slider-fill)) !important;
	border: none !important;
}

.askrexa-ap-slider::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: #000000 !important;
	cursor: pointer !important;
	border: none !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
	margin-top: -8px !important;
}

.askrexa-ap-slider::-moz-range-thumb {
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: #000000 !important;
	cursor: pointer !important;
	border: none !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Ticks are placed by JS at the exact x-position the thumb center travels
   to (calc(thumbRadius + (100% - thumbRadius*2) * fraction)), so they sit
   directly under each stop instead of approximating with flexbox. */
.askrexa-ap-slider-scale {
	position: relative !important;
	height: 22px !important;
	margin-top: 8px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: var(--askrexa-muted) !important;
}

.askrexa-ap-slider-scale span {
	position: absolute !important;
	top: 0 !important;
	transform: translateX(-50%) !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	padding: 4px 2px !important;
	margin: -4px -2px !important;
}

.askrexa-ap-slider-scale span:hover {
	color: var(--askrexa-text, #111) !important;
}

/* Language multi-select */
.askrexa-ap-language-list {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 10px !important;
	margin-top: 20px !important;
}

.askrexa-ap-language-option {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 12px 16px !important;
	border: 1px solid var(--askrexa-hairline) !important;
	border-radius: 14px !important;
	cursor: pointer !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--askrexa-ink) !important;
	transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

.askrexa-ap-language-option:hover {
	border-color: var(--askrexa-ink) !important;
}

.askrexa-ap-language-option.is-selected {
	border-color: var(--askrexa-ink) !important;
	background-color: rgba(26, 26, 26, 0.04) !important;
}

/* The theme forces `appearance: none` on every checkbox and draws its own
   check glyph via a Font Awesome ::before rule, which never renders here —
   so this checkbox owns its full checked-state appearance instead of
   relying on accent-color (which native appearance:none disables). */
.askrexa-ap-language-option input[type="checkbox"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: relative !important;
	flex-shrink: 0 !important;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	border: 1.5px solid var(--askrexa-hairline) !important;
	border-radius: 4px !important;
	background-color: #ffffff !important;
	cursor: pointer !important;
}

.askrexa-ap-language-option input[type="checkbox"]:before {
	content: none !important;
	display: none !important;
}

.askrexa-ap-language-option input[type="checkbox"]:checked {
	background-color: var(--askrexa-dark) !important;
	border-color: var(--askrexa-dark) !important;
}

.askrexa-ap-language-option input[type="checkbox"]:checked:after {
	content: '' !important;
	position: absolute !important;
	left: 50% !important;
	top: 40% !important;
	width: 4px !important;
	height: 8px !important;
	border: solid #ffffff !important;
	border-width: 0 2px 2px 0 !important;
	transform: translate(-50%, -50%) rotate(45deg) !important;
}

/* Avatar radio group */
.askrexa-ap-radio-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	margin-top: 20px !important;
}

.askrexa-ap-radio {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 16px 18px !important;
	border: 1px solid var(--askrexa-hairline) !important;
	border-radius: 14px !important;
	cursor: pointer !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--askrexa-ink) !important;
	transition: border-color 0.2s ease !important;
}

.askrexa-ap-radio:has(input:checked) {
	border-color: var(--askrexa-ink) !important;
	background-color: rgba(26, 26, 26, 0.04) !important;
}

.askrexa-ap-radio input {
	width: 18px !important;
	height: 18px !important;
	accent-color: var(--askrexa-dark) !important;
}

/* The theme's radio dot uses fixed px offsets (top:5px; left:5px; right:5px)
   sized for its own 20px box, which centers wrong against our 18px radio.
   Use percentage centering instead so it's correct regardless of box size. */
.askrexa-ap-radio-group input[type="radio"]:checked:before {
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	transform: translate(-50%, -50%) !important;
}

.askrexa-ap-avatar-count {
	margin-top: 24px !important;
}

.askrexa-ap-avatar-count[hidden] {
	display: none !important;
}

/* Contact fields */
.askrexa-ap-field-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 16px !important;
}

.askrexa-ap-field {
	margin-bottom: 16px !important;
}

.askrexa-ap-field label {
	display: block !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--askrexa-muted) !important;
	margin-bottom: 6px !important;
	letter-spacing: -0.01em !important;
}

.askrexa-ap-field input,
.askrexa-ap-field textarea {
	width: 100% !important;
	padding: 13px 16px !important;
	border: 1px solid var(--askrexa-hairline) !important;
	border-radius: 12px !important;
	background-color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: var(--askrexa-ink) !important;
	line-height: 1.4 !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.askrexa-ap-field textarea {
	resize: vertical !important;
}

.askrexa-ap-field input:focus,
.askrexa-ap-field textarea:focus {
	outline: none !important;
	border-color: var(--askrexa-ink) !important;
}

.askrexa-ap-field input[aria-invalid="true"],
.askrexa-ap-field textarea[aria-invalid="true"] {
	border-color: #c00 !important;
}

/* Phone: one unified input-styled container, split into an unbordered
   country trigger + an unbordered number input, so the pair reads as a
   single field instead of two boxes glued together. */
.askrexa-ap-phone-row {
	display: flex !important;
	align-items: stretch !important;
	border: 1px solid var(--askrexa-hairline) !important;
	border-radius: 12px !important;
	background-color: #ffffff !important;
	transition: border-color 0.2s ease !important;
}

.askrexa-ap-phone-row:focus-within {
	border-color: var(--askrexa-ink) !important;
}

.askrexa-ap-phone-row:has(.askrexa-ap-phone-number[aria-invalid="true"]) {
	border-color: #c00 !important;
}

.askrexa-ap-country-select:after {
	content: '' !important;
	position: absolute !important;
	top: 10px !important;
	bottom: 10px !important;
	right: 0 !important;
	width: 1px !important;
	background-color: var(--askrexa-hairline) !important;
}

.askrexa-ap-country-select {
	position: relative !important;
	flex: 0 0 auto !important;
}

.askrexa-ap-country-trigger {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	height: 100% !important;
	padding: 13px 16px 13px 16px !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	background-origin: initial !important;
	box-shadow: none !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: var(--askrexa-ink) !important;
	line-height: 1.4 !important;
	cursor: pointer !important;
	transition: none !important;
}

/* Same theme background-shorthand-on-hover issue handled for .askrexa-ap-btn
   above applies to this bare <button> too — re-neutralize on :hover. */
.askrexa-ap-country-trigger:hover {
	background: transparent !important;
	background-image: none !important;
}

.askrexa-ap-country-trigger:before,
.askrexa-ap-country-trigger:after {
	content: none !important;
	display: none !important;
	background: none !important;
}

.askrexa-ap-country-trigger .button-inner {
	display: none !important;
}

/* The global reset forces font-family: 'Now', sans-serif on every element,
   and 'Now' has no emoji glyphs — without an explicit emoji fallback here
   the flags render blank instead of falling back to the OS emoji font. */
.askrexa-ap-country-flag,
.askrexa-ap-country-option-flag {
	font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important;
	font-size: 16px !important;
	line-height: 1 !important;
}

.askrexa-ap-country-dial {
	white-space: nowrap !important;
}

/* Drawn with borders instead of a unicode glyph — avoids encoding issues
   some hosts hit serving this file (a plain chevron character can arrive
   mangled if the response isn't served as UTF-8). */
.askrexa-ap-country-caret {
	flex-shrink: 0 !important;
	width: 7px !important;
	height: 7px !important;
	border: none !important;
	border-bottom: 1.5px solid var(--askrexa-muted) !important;
	border-right: 1.5px solid var(--askrexa-muted) !important;
	transform: rotate(45deg) translateY(-2px) !important;
	margin-left: 1px !important;
}

.askrexa-ap-country-dropdown {
	position: absolute !important;
	top: calc(100% + 6px) !important;
	left: 0 !important;
	width: 280px !important;
	max-width: 90vw !important;
	background-color: #ffffff !important;
	border: 1px solid var(--askrexa-ink) !important;
	border-radius: 16px !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
	padding: 10px !important;
	z-index: 20 !important;
}

.askrexa-ap-country-dropdown[hidden] {
	display: none !important;
}

.askrexa-ap-country-search {
	width: 100% !important;
	padding: 10px 12px !important;
	border: 1px solid var(--askrexa-hairline) !important;
	border-radius: 10px !important;
	background-color: #ffffff !important;
	font-size: 14px !important;
	color: var(--askrexa-ink) !important;
	margin-bottom: 8px !important;
}

.askrexa-ap-country-search:focus {
	border-color: var(--askrexa-ink) !important;
}

.askrexa-ap-country-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	max-height: 220px !important;
	overflow-y: auto !important;
}

/* The theme injects a fontello bullet icon before every <li> via
   `ul > li:before` (absolutely positioned) — neutralize it here the same
   way .askrexa-ap-btn strips the theme's button chrome elsewhere in this
   file, otherwise a stray icon overlaps each country row. */
.askrexa-ap-country-list li:before {
	content: none !important;
	display: none !important;
}

.askrexa-ap-country-option {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 9px 10px !important;
	border-radius: 10px !important;
	cursor: pointer !important;
	font-size: 14px !important;
	color: var(--askrexa-ink) !important;
	transition: background-color 0.15s ease !important;
}

.askrexa-ap-country-option:hover {
	background-color: rgba(26, 26, 26, 0.05) !important;
}

.askrexa-ap-country-option-flag {
	flex-shrink: 0 !important;
}

.askrexa-ap-country-option-name {
	flex: 1 1 auto !important;
	font-weight: 300 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.askrexa-ap-country-option-dial {
	flex-shrink: 0 !important;
	color: var(--askrexa-muted) !important;
	font-size: 13px !important;
}

.askrexa-ap-country-empty {
	padding: 12px 10px !important;
	font-size: 13.5px !important;
	color: var(--askrexa-muted) !important;
	text-align: center !important;
}

.askrexa-ap-phone-number {
	flex: 1 1 auto !important;
	width: auto !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}

input[type="tel"].askrexa-ap-phone-number {
	border: 0 !important;
}

.askrexa-ap-phone-number:focus {
	border: none !important;
	box-shadow: none !important;
}

@media (max-width: 600px) {
	.askrexa-ap-country-trigger {
		padding: 13px 8px 13px 12px !important;
	}

	.askrexa-ap-country-dial {
		display: none !important;
	}

	.askrexa-ap-country-dropdown {
		width: 100% !important;
	}
}

.askrexa-ap-field-error {
	display: block !important;
	min-height: 16px !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	color: #c00 !important;
	margin-top: 6px !important;
}

/* Nav buttons */
.askrexa-ap-nav {
	display: flex !important;
	justify-content: flex-end !important;
	gap: 12px !important;
	margin-top: 32px !important;
	padding-top: 24px !important;
	border-top: 1px solid var(--askrexa-hairline) !important;
}

.askrexa-ap-btn[hidden] {
	display: none !important;
}

.askrexa-ap-btn {
	--button-border-width: 0px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 13px 24px !important;
	border-radius: 9999px !important;
	font-size: 15px !important;
	font-weight: 300 !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	border: 1px solid transparent !important;
	background-origin: initial !important;
	background-image: none !important;
	transition: none !important;
}

/* The theme applies `background: linear-gradient(...)` (shorthand) to bare
   <button>:hover inside .content-wrapper — the shorthand resets
   background-image on hover regardless of our base rule, so it must be
   re-neutralized specifically in the :hover state too. */
.askrexa-ap-btn:hover {
	background-image: none !important;
}

/* Neutralize the theme's global gradient-border mask (button::after) and
   the .button-inner overlay it relies on — same technique pricing-widget.css
   uses to strip the theme's default button chrome. */
.askrexa-ap-btn:before,
.askrexa-ap-btn:after {
	content: none !important;
	display: none !important;
	background: none !important;
}

.askrexa-ap-btn .button-inner {
	display: none !important;
}

.askrexa-ap-btn-back {
	background-color: transparent !important;
	color: var(--askrexa-ink) !important;
	border: 1px solid var(--askrexa-hairline) !important;
	margin-right: auto !important;
}

.askrexa-ap-btn-next,
.askrexa-ap-btn-submit {
	background-color: var(--askrexa-dark) !important;
	color: #ffffff !important;
}

.askrexa-ap-btn-next:hover,
.askrexa-ap-btn-submit:hover {
	background-color: var(--askrexa-dark) !important;
	color: #ffffff !important;
}

.askrexa-ap-btn-back:hover {
	background-color: transparent !important;
	color: var(--askrexa-ink) !important;
}

.askrexa-ap-btn:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}

/* Success state */
.askrexa-ap-success {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 1 1 auto !important;
	border: 1px solid var(--askrexa-ink) !important;
	border-radius: 32px !important;
	background-color: rgba(255, 255, 255, 0.6) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	padding: 48px 40px !important;
	text-align: center !important;
}

.askrexa-ap-success[hidden] {
	display: none !important;
}

/* Explicit display override: the icon carries aria-hidden="true" for
   decoration, and many themes ship a global `[aria-hidden="true"] {
   display: none !important; }` a11y utility rule — every other element in
   this file already fights theme conflicts by declaring its own display,
   this one just needs the same treatment. */
.askrexa-ap-success-check {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 64px !important;
	height: 64px !important;
	margin: 0 auto 20px auto !important;
	border-radius: 50% !important;
	border: 2px solid var(--askrexa-dark) !important;
	background: transparent !important;
	box-sizing: border-box !important;
	opacity: 1 !important;
}

.askrexa-ap-success-check-mark {
	font-size: 30px !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	color: var(--askrexa-dark) !important;
}

/* Optional pop-in enhancement, applied on top of the always-visible base
   state above so a stripped/disabled animation never hides the icon. */
.askrexa-ap-success-check.is-animating {
	animation: askrexa-ap-pop-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes askrexa-ap-pop-in {
	from {
		transform: scale(0.6);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.askrexa-ap-success h3 {
	font-size: 24px !important;
	font-weight: 500 !important;
	letter-spacing: -0.03em !important;
	color: var(--askrexa-ink) !important;
	margin: 0 0 10px 0 !important;
}

.askrexa-ap-success p {
	font-size: 15px !important;
	font-weight: 300 !important;
	color: var(--askrexa-muted) !important;
	margin: 0 !important;
}

/* Live summary panel */
.askrexa-ap-summary {
	position: sticky !important;
	top: 24px !important;
	border: 1px solid var(--askrexa-ink) !important;
	border-radius: 24px !important;
	background-color: var(--askrexa-dark) !important;
	padding: 32px 28px !important;
}

.askrexa-ap-summary-title {
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.6) !important;
	margin: 0 0 20px 0 !important;
}

.askrexa-ap-summary-item {
	padding: 14px 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.askrexa-ap-summary-item:first-of-type {
	border-top: none !important;
	padding-top: 0 !important;
}

.askrexa-ap-summary-item[hidden] {
	display: none !important;
}

.askrexa-ap-summary-value {
	display: block !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	color: #ffffff !important;
	line-height: 1.2em !important;
}

.askrexa-ap-summary-label {
	display: block !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: rgba(255, 255, 255, 0.6) !important;
	margin-top: 2px !important;
}

/* Responsive */
@media (max-width: 900px) {
	.askrexa-ap-layout {
		grid-template-columns: 1fr !important;
	}

	.askrexa-ap-summary {
		position: static !important;
	}
}

@media (max-width: 600px) {
	.askrexa-ap-form {
		padding: 32px 22px !important;
		border-radius: 24px !important;
	}

	.askrexa-ap-field-row {
		grid-template-columns: 1fr !important;
	}

	.askrexa-ap-language-list {
		grid-template-columns: 1fr !important;
	}

	.askrexa-ap-step-title {
		font-size: 20px !important;
	}

	.askrexa-ap-step-value {
		font-size: 26px !important;
	}

	.askrexa-ap-nav {
		flex-wrap: wrap !important;
	}

	.askrexa-ap-btn {
		flex: 1 1 auto !important;
	}
}