@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.nxt-style-1 .nxt-form,.nxt-style-1.block-editor-block-list__layout {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end
}

.nxt-check-box {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.nxt-check-box,.nxt-message-input {
    position: relative
}

.nxt-message-input,.nxt-option-container,.nxt-radio-box {
    display: flex;
    flex-direction: column
}

.nxt-number-input,.nxt-option-container,.nxt-radio-box {
    position: relative
}

.nxt-check-box,.nxt-radio-box {
    padding-top: 8px
}

.nxt-submit .nxt-button-svg svg ,.nxt-submit .tpgb-draw-svg {
    width: 20px;
    height: 20px;
    display: flex
}

.nxt-check-box-container,.nxt-date-input,.nxt-time-input, .nxt-email-input,.nxt-name-input,.nxt-phone-input,.nxt-url-input,.nxt-number-input,.nxt-option-container,.nxt-radio-box  {
    display: flex;
    flex-direction: column;
    position: relative
}

label.nxt-check-title-label,
label.nxt-date-label,
label.nxt-email-label,
label.nxt-message-label,
label.nxt-name-label,
label.nxt-number-label,
label.nxt-option-label,
label.nxt-phone-label,
label.nxt-radio-title-label,
label.nxt-time-label,
label.nxt-url-label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    transition: all .3s ease-in-out
}

.nxt-input-container {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    gap: 8px;
    display: flex;
    align-items: center;
    width: 100%;
    transition: all .3s ease-in-out
}

.nxt-email-input .nxt-input-container .nxt-email-richtext,.nxt-name-input .nxt-input-container .nxt-name-richtext,.nxt-number-field .nxt-number-input .nxt-number-richtext,.nxt-url-field .nxt-url-input .nxt-url-richtext {
    padding: 0;
    font-size: 14px;
    line-height: 1.6;
    margin-left: 0;
    margin-right: 0;
    border-radius: 4px;
    border-width: 0;
    background-color: #fff;
    width: 100%;
    transition: all .3s ease-in-out;
    background: 0 0;
    min-height: 0px
}

.nxt-email-input .nxt-input-container .nxt-email-richtext,.nxt-email-input .nxt-input-container .nxt-email-richtext:focus,.nxt-name-input .nxt-input-container .nxt-name-richtext:focus {
    outline: 0;
    border: 0;
    box-shadow: none
}

.nxt-input-wrapper,.nxt-message-input .nxt-message-richtext {
    border: 1px solid #8f8f8fa6;
    border-radius: 4px;
    transition: all .3s ease-in-out
}

.nxt-message-input .nxt-message-richtext {
    padding: 10px;
    font-size: 14px;
    min-height: 100px;
    resize: vertical;
    background-color: #fff
}

.nxt-input-wrapper {
    display: flex;
    position: relative;
    align-items: center;
    padding: 10px;
    width: 100%;
}

.nxt-input-wrapper .nxt-country-dropdown,.nxt-input-wrapper .nxt-phone-icon~.nxt-country-dropdown {
    padding: 0;
    border: 0;
    border-radius: 4px;
    z-index: 2;
    width: 100px;
    transition: all .3s ease-in-out;
    background: 0 0;
    min-height: 0px;
}

.nxt-phone-input .nxt-input-wrapper .nxt-phone-icon~.nxt-phone-richtext,.nxt-phone-input .nxt-input-wrapper .nxt-phone-richtext {
    border: 0;
    border-radius: 4px;
    z-index: 1;
    line-height: 1.6;
    font-size: 14px;
    width: 100%;
    transition: all .3s ease-in-out;
    padding: 0;
    background: 0 0;
    min-height: 0px;
}

.nxt-submit,.nxt-submit:disabled,.nxt-submit:focus,.nxt-submit:hover {
    display: flex;
    border: 0;
    background-color: #162d9e;
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    opacity: 1;
    position: relative;
    text-align: center;
    min-width: 110px;
    justify-content: center;
    overflow: hidden;
    align-items: center
}

.nxt-radio-box {
    gap: 5px;
    border-radius: 8px
}

.nxt-accept-label,.nxt-check-label,.nxt-radio-label {
    color: #000;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    transition: all .3s ease-in-out
}

.nxt-link-label {
    transition: all .3s ease-in-out
}

.nxt-radio-box .nxt-radio-richtext {
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: 16px;
    border: 1px solid #8f8f8fa6;
    border-radius: 50%;
    margin-right: 10px;
    appearance: none;
    display: inline-block;
    position: relative;
    cursor: pointer
}

.nxt-accept-input .nxt-accept-richtext {
    cursor: pointer
}

.nxt-radio-box input[type=radio]:checked,.nxt-radio-box input[type=radio]:checked:hover {
    border: 1px solid #8f8f8fa6;
    background-color: #fff
}

.nxt-radio-box input[type=radio]:checked:focus {
    background-color: #fff
}

.nxt-radio-box .nxt-radio-richtext::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #162d9e;
    border: 1px solid #8f8f8fa6;
    transform: translate(-50%,-50%) scale(0);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    opacity: 0;
    transition: all .3s cubic-bezier(.12,.4,.29,1.46)
}

.nxt-radio-box .nxt-radio-richtext:checked::after {
    transform: translate(-50%,-50%) scale(1);
    opacity: 1
}

.nxt-check-box {
    border-radius: 8px
}

.nxt-accept-label input[type=checkbox],.nxt-check-label input[type=checkbox] {
    margin-right: 8px
}

.nxt-check-box .nxt-check-richtext {
    padding: 0;
    font-size: 16px;
    border: 1px solid #8f8f8fa6;
    border-radius: 4px;
    transition: all .3s ease-in-out
}

.nxt-accept-input .nxt-accept-richtext,.nxt-check-box .nxt-check-richtext {
    width: 20px;
    height: 20px;
    appearance: none;
    display: inline-block;
    position: relative;
    margin: 0 10px 0 0
}

.nxt-accept-input .nxt-accept-richtext::after,.nxt-check-box .nxt-check-richtext::after {
    content: "";
    position: absolute;
    top: 40%;
    left: 50%;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    width: calc(20px - 70%);
    height: calc(20px - 45%);
    transform: translate(-50%,-50%) rotate(45deg) scale(0);
    opacity: 0;
    transition: transform .3s cubic-bezier(.12,.4,.29,1.46),opacity .3s ease
}

.nxt-accept-input .nxt-accept-richtext:checked::after,.nxt-check-box .nxt-check-richtext:checked::after {
    transform: translate(-50%,-50%) rotate(45deg) scale(1);
    opacity: 1
}

.nxt-accept-input .nxt-accept-richtext:checked,.nxt-accept-input .nxt-accept-richtext:checked:focus,.nxt-check-box .nxt-check-richtext:checked {
    background-color: #162d9e
}

.nxt-accept-input .nxt-accept-richtext:checked::before,.nxt-check-box .nxt-check-richtext:checked::before,.nxt-radio-box .nxt-radio-richtext:checked::before {
    content: none
}

.nxt-accept-input .nxt-accept-richtext:not(:checked)::after,.nxt-check-box .nxt-check-richtext:not(:checked)::after {
    transform: translate(-50%,-50%) rotate(45deg) scale(0);
    opacity: 0;
    transition: none
}

.nxt-date-field .nxt-date-input .nxt-date-richtext,.nxt-option-container .nxt-option-field,.nxt-time-field .nxt-time-input .nxt-time-richtext {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #8f8f8fa6;
    border-radius: 4px;
    transition: all .3s ease-in-out;
    line-height: 1.6;
    background-color: #fff;
    appearance: none;
    min-height: 0px;
}

.nxt-option-container .nxt-option-field {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23666' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding: 10px
}

.nxt-accept-input {
    display: flex;
    align-items: center;
    gap: 10px
}

.nxt-accept-input .nxt-accept-richtext {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #8f8f8fa6;
    border-radius: 4px;
    transition: all .3s ease-in-out;
    line-height: 2
}

.nxt-accept-richtext:focus {
    border-color: #007bff;
    outline: 0
}

.nxt-phone-icon,.nxt-placeholder-icon {
    padding-left: 8px;
    padding-right: 8px;
    transition: all .3s ease-in-out;
    z-index: 10
}

.nxt-button-svg {
    display: flex;
    align-items: center
}

.nxt-check-box.horizontal,.nxt-radio-box.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px
}

.nxt-radio-box.vertical {
    flex-direction: column;
    gap: 8px
}

.nxt-time-label-container,.nxt-url-label-container {
    display: flex;
    align-items: center;
    position: relative
}

.nxt-inner-icon {
    font-size: 18px;
    height: 18px
}

.nxt-name-richtext {
    flex: 1;
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: 0;
    color: #333;
    width: 100%;
    box-sizing: border-box
}

.nxt-icon {
    width: 18px;
    height: 18px;
    object-fit: contain
}

.nxt-message-richtext::placeholder {
    opacity: 1;
    font: 400 1em Arial,sans-serif
}


.nxt-check-title-label.required::after,.nxt-date-label.required::after,.nxt-email-label.required::after,.nxt-message-label.required::after,.nxt-name-label.required::after,.nxt-number-label.required::after,.nxt-option-label.required::after,.nxt-phone-label.required::after,.nxt-radio-title-label.required::after,.nxt-time-label.required::after,.nxt-url-label.required::after {
    content: "";
    color: red;
    margin-left: 4px
}

.nxt-error-checkbox,.nxt-error-date,.nxt-error-email,.nxt-error-number,.nxt-error-phone,.nxt-error-radiobox,.nxt-error-select,.nxt-error-show,.nxt-error-time,.nxt-error-url,.nxt-message-error {
    color: red;
    font-size: 14px
}

.nxt-input-wrapper .nxt-phone-richtext:focus,.nxt-number-field .nxt-number-input .nxt-number-richtext:focus,.nxt-url-input .nxt-url-richtext:focus {
    border: 0;
    box-shadow: none;
    outline: 0
}

.nxt-check-box input[type=checkbox],.nxt-check-box input[type=checkbox]:checked,.nxt-date-input .nxt-date-richtext:focus,.nxt-message-richtext:focus,.nxt-option-container .nxt-option-field:focus,.nxt-radio-box input[type=radio],.nxt-radio-box input[type=radio]:checked:focus,.nxt-time-input .nxt-time-richtext:focus {
    box-shadow: none;
    border: 1px solid #8f8f8fa6;
    outline: 0
}

.nxt-date-richtext:focus,.nxt-number-richtext:focus,.nxt-option-field:focus,.nxt-time-richtext:focus,.nxt-url-richtext:focus {
    outline-width: 0;
    outline-style: none
}

.nxt-input-wrapper .nxt-country-dropdown:focus {
    box-shadow: none;
    border: 0
}

.nxt-style-1 .nxt-message-input .nxt-message-richtext:focus {
    outline: 0;
    box-shadow: none
}

.nxt-help-text {
    width: -webkit-fill-available
}

.nxt-submit-button {
    display: inline-block;
    text-align: center;
    position: relative;
    flex: 1 1 100%
}

.nxt-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 30px;
    height: 30px;
    z-index: 10;
    opacity: 0;
}

.nxt-loader::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top: 3px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite
}

.nxt-submit-button .nxt-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px;
    box-sizing: border-box;
    padding: 8px 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    transition: all .3s ease-in-out
}

.tp-form-acceptance-button {
    flex: 1 1 100%
}

.nxt-check-box.round .nxt-checkbox-list .nxt-check-richtext {
    border-radius: 50%
}

/* The radio is 18px across, so a 10px radius is more than half its size and
   the browser clamps it back to a full circle - Square looked identical to
   Round. 3px reads as square at this size; the inner dot needs less again. */
.nxt-radio-box.square .nxt-checkbox-list .nxt-radio-richtext,.nxt-radio-box.square .nxt-radio-list .nxt-radio-richtext {
    border-radius: 3px
}
.nxt-radio-box.square .nxt-radio-richtext:checked::after {
    border-radius: 2px
}

.nxt-checkbox-list,.nxt-radio-list {
    display: flex;
    align-items: center
}

.tp-form-block input:-webkit-autofill,.tp-form-block input:-webkit-autofill:focus,.tp-form-block input:-webkit-autofill:hover,.tp-form-block select:-webkit-autofill,.tp-form-block textarea:-webkit-autofill {
    box-shadow: 0 0 0 1000px transparent inset!important;
    transition: background-color 9999s ease-in-out 0s!important
}

.nxt-message-richtext::-webkit-scrollbar {
    opacity: 0;
    visibility: hidden;
    width: 8px
}

.nxt-message-richtext::-webkit-scrollbar-thumb {
    background: gray;
    border-radius: 10px
}

.nxt-submit-button.nxt-btn-inline .nxt-submit {
    width: 100%
}

.nxt-date-field:has(.nxt-error-date:not(:empty))+.nxt-submit-button.nxt-btn-inline,.nxt-form-option:has(.nxt-error-select:not(:empty))+.nxt-submit-button.nxt-btn-inline,.nxt-number-field:has(.nxt-error-number:not(:empty))+.nxt-submit-button.nxt-btn-inline,.nxt-time-field:has(.nxt-error-time:not(:empty))+.nxt-submit-button.nxt-btn-inline,.nxt-url-field:has(.nxt-error-url:not(:empty))+.nxt-submit-button.nxt-btn-inline,.tp-form-checkbox-button:has(.nxt-error-checkbox:not(:empty))+.nxt-submit-button.nxt-btn-inline,.tp-form-email-field:has(.nxt-error-email:not(:empty))+.nxt-submit-button.nxt-btn-inline,.tp-form-message-field:has(.nxt-message-error:not(:empty))+.nxt-submit-button.nxt-btn-inline,.tp-form-name-field:has(.nxt-error-show:not(:empty))+.nxt-submit-button.nxt-btn-inline,.tp-form-phone-field:has(.nxt-error-phone:not(:empty))+.nxt-submit-button.nxt-btn-inline,.tp-form-radio-button:has(.nxt-error-radiobox:not(:empty))+.nxt-submit-button.nxt-btn-inline {
    margin-bottom: 30px
}

.nxt-date-field:has(.nxt-date-input>.nxt-help-text:nth-child(3):not(:empty)):not(:has(.nxt-error-date:not(:empty)))+.nxt-submit-button.nxt-btn-inline,.nxt-form-option:has(.nxt-option-container>.nxt-help-text:nth-child(3):not(:empty)):not(:has(.nxt-error-select:not(:empty)))+.nxt-submit-button.nxt-btn-inline,.nxt-number-field:has(.nxt-number-input>.nxt-help-text:nth-child(3):not(:empty)):not(:has(.nxt-error-number:not(:empty)))+.nxt-submit-button.nxt-btn-inline,.nxt-time-field:has(.nxt-time-input>.nxt-help-text:nth-child(3):not(:empty)):not(:has(.nxt-error-time:not(:empty)))+.nxt-submit-button.nxt-btn-inline,.nxt-url-field:has(.nxt-url-input>.nxt-help-text:nth-child(3):not(:empty)):not(:has(.nxt-error-url:not(:empty)))+.nxt-submit-button.nxt-btn-inline,.tp-form-checkbox-button:has(.nxt-check-box>.nxt-help-text:nth-child(3):not(:empty)):not(:has(.nxt-error-checkbox:not(:empty)))+.nxt-submit-button.nxt-btn-inline,.tp-form-email-field:has(.nxt-email-input>.nxt-help-text:nth-child(3):not(:empty)):not(:has(.nxt-error-email:not(:empty)))+.nxt-submit-button.nxt-btn-inline,.tp-form-message-field:has(.nxt-message-input>.nxt-help-text:nth-child(3):not(:empty)):not(:has(.nxt-message-error:not(:empty)))+.nxt-submit-button.nxt-btn-inline,.tp-form-name-field:has(.nxt-name-input>.nxt-help-text:nth-child(3):not(:empty)):not(:has(.nxt-error-show:not(:empty)))+.nxt-submit-button.nxt-btn-inline,.tp-form-phone-field:has(.nxt-phone-input>.nxt-help-text:nth-child(3):not(:empty)):not(:has(.nxt-error-phone:not(:empty)))+.nxt-submit-button.nxt-btn-inline,.tp-form-radio-button:has(.nxt-radio-box>.nxt-help-text:nth-child(3):not(:empty)):not(:has(.nxt-error-radiobox:not(:empty)))+.nxt-submit-button.nxt-btn-inline {
    margin-bottom: 40px
}

.nxt-date-field:has(.nxt-error-date:not(:empty)):has(.nxt-date-input>.nxt-help-text:nth-child(3):not(:empty))+.nxt-submit-button.nxt-btn-inline,.nxt-form-option:has(.nxt-error-select:not(:empty)):has(.nxt-option-container>.nxt-help-text:nth-child(3):not(:empty))+.nxt-submit-button.nxt-btn-inline,.nxt-number-field:has(.nxt-error-number:not(:empty)):has(.nxt-number-input>.nxt-help-text:nth-child(3):not(:empty))+.nxt-submit-button.nxt-btn-inline,.nxt-time-field:has(.nxt-error-time:not(:empty)):has(.nxt-time-input>.nxt-help-text:nth-child(3):not(:empty))+.nxt-submit-button.nxt-btn-inline,.nxt-url-field:has(.nxt-error-url:not(:empty)):has(.nxt-url-input>.nxt-help-text:nth-child(3):not(:empty))+.nxt-submit-button.nxt-btn-inline,.tp-form-checkbox-button:has(.nxt-error-checkbox:not(:empty)):has(.nxt-check-box>.nxt-help-text:nth-child(3):not(:empty))+.nxt-submit-button.nxt-btn-inline,.tp-form-email-field:has(.nxt-error-email:not(:empty)):has(.nxt-email-input>.nxt-help-text:nth-child(3):not(:empty))+.nxt-submit-button.nxt-btn-inline,.tp-form-message-field:has(.nxt-message-error:not(:empty)):has(.nxt-message-input>.nxt-help-text:nth-child(3):not(:empty))+.nxt-submit-button.nxt-btn-inline,.tp-form-name-field:has(.nxt-error-show:not(:empty)):has(.nxt-name-input>.nxt-help-text:nth-child(3):not(:empty))+.nxt-submit-button.nxt-btn-inline,.tp-form-phone-field:has(.nxt-error-phone:not(:empty)):has(.nxt-phone-input>.nxt-help-text:nth-child(3):not(:empty))+.nxt-submit-button.nxt-btn-inline,.tp-form-radio-button:has(.nxt-error-radiobox:not(:empty)):has(.nxt-radio-box>.nxt-help-text:nth-child(3):not(:empty))+.nxt-submit-button.nxt-btn-inline {
    margin-bottom: 62px
}

.nxt-submit-button.nxt-btn-block .nxt-submit,.nxt-submit-button.nxt-btn-inline .nxt-submit {
    min-height: 43px;
    min-width: 0px
}
.nxt-submit-button .nxt-submit,.nxt-btn-inline .nxt-submit {
    line-height: 1.8;
    min-width: 0px
}

/* Multi-step form — progress indicator, steps and navigation. */

/* The form lays its fields out with flex. A step is a container, not a field,
   so the form switches to block flow when steps are present and each step
   takes over the flex layout for the fields it holds. */
.nxt-form:has(.nxt-form-step) {
	display: block;
}
.nxt-form-step {
	display: flex;
	flex-wrap: wrap;
	gap: inherit;
	width: 100%;
}
.nxt-form:has(.nxt-form-step) > .nxt-form-steps,
.nxt-form:has(.nxt-form-step) > .nxt-form-step-nav {
	width: 100%;
}

/* Laid out as a grid rather than a wrapping flex row. Wrapped flex items
   stretch to fill whatever is left, so a single step left over on a second
   row would spread across the full width; grid keeps every step the same
   size as the ones above it. */
.nxt-form-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--nxt-step-min, 110px), 1fr));
	align-items: start;
	row-gap: 18px;
	margin: 0 0 24px;
}
/* Steps share the width evenly, but stop shrinking once they get too narrow
   to read. Past that point the bar wraps onto another line rather than
   squeezing every step or forcing the page to scroll sideways. */
.nxt-form-step-item {
	position: relative;
	min-width: 0;
	text-align: center;
	font-size: 13px;
	color: #7a8190;
}
.nxt-form-step-item::after {
	content: "";
	position: absolute;
	top: 17px;
	left: calc(50% + 22px);
	right: calc(-50% + 22px);
	height: 2px;
	background: #e2e6ee;
}
/* Matched by type, not position: in the editor the bar also holds the add
   control, so the final step is no longer the last child and its connector
   would carry on past it. */
.nxt-form-step-item:last-of-type::after {
	display: none;
}
.nxt-form-step-dot {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0 auto 7px;
	border: 1px solid #e2e6ee;
	border-radius: 50%;
	background: #fff;
	font-size: 14px;
	line-height: 1;
}
.nxt-form-step-item.is-current .nxt-form-step-dot {
	border-color: #1717cc;
	background: #1717cc;
	color: #fff;
}
.nxt-form-step-item.is-current .nxt-form-step-label {
	color: #1c1e21;
}
.nxt-form-step-item.is-done {
	cursor: pointer;
}
.nxt-form-step-item.is-done .nxt-form-step-dot {
	border-color: #1d9e75;
	background: #1d9e75;
}
.nxt-form-step-item.is-done .nxt-form-step-dot::after {
	content: "";
	width: 6px;
	height: 11px;
	margin-top: -3px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.nxt-form-step-item.is-done::after {
	background: #1d9e75;
}
.nxt-form-step-item.is-done .nxt-form-step-label {
	color: #1c1e21;
}

.nxt-form-step-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
}
.nxt-form-step-nav .nxt-step-back {
	margin-right: auto;
}
.nxt-form-step-nav .nxt-submit-button {
	margin-left: auto;
}
.nxt-step-btn {
	padding: 9px 20px;
	border: 1px solid #1717cc;
	border-radius: 4px;
	background: #1717cc;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
}
.nxt-step-btn.nxt-step-back {
	border-color: #d5d9e0;
	background: transparent;
	color: #1c1e21;
}
.nxt-step-btn:hover,
.nxt-step-btn:focus {
    border-color: #1212a3;
    background: #1212a3;
}

.nxt-step-btn.nxt-step-back:hover,
.nxt-step-btn.nxt-step-back:focus {
    border-color: #b9b5ee;
    background: #f4f4fb;
    color: #1c1e21;
}

.nxt-step-invalid input,
.nxt-step-invalid textarea,
.nxt-step-invalid select {
	border-color: #a32d2d;
}

/* Screen-reader announcement for step changes. */
.nxt-form-step-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Labels collapse on narrow screens so many steps still fit. */
@media (max-width: 575px) {
	.nxt-form-steps {
		justify-content: center;
		margin-bottom: 44px;
	}
	.nxt-form-step-item {
		flex: 0 0 auto;
		padding: 0 14px;
	}
	.nxt-form-step-item .nxt-form-step-label {
		display: none;
	}
	.nxt-form-step-item.is-current .nxt-form-step-label {
		display: block;
		position: absolute;
		top: 42px;
		left: 50%;
		width: 140px;
		margin-left: -70px;
	}
}

/* How narrow a step may get before the bar wraps. It depends on what the
   design puts in a step: the pill shows only a dot, while the chevron and the
   tiles carry an icon and a label side by side. */
.nxt-form-steps--check,
.nxt-form-steps--timeline {
	--nxt-step-min: 110px;
}
.nxt-form-steps--tabs {
	--nxt-step-min: 165px;
}
.nxt-form-steps--chevron,
.nxt-form-steps--tiles {
	--nxt-step-min: 170px;
}
/* The pill is one continuous track, so it must never break onto a second
   line — its steps stay as narrow as the dot they hold. */
/* The pill is one continuous track, so it must never break onto a second
   line — its steps sit in a single row however many there are. */
.nxt-form-steps--pill {
	--nxt-step-min: 24px;
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

/* ---- Step navigation designs ------------------------------------------- *
 * Six progress designs. The markup is the same for all of them — an item per
 * step holding a dot and a label — so switching design is a class change and
 * nothing in the script has to know which one is active.
 *
 * Each design is written to match its preview image in the Step Navigation
 * Style picker, so what is chosen is what is drawn.
 * ------------------------------------------------------------------------ */

/* 1. Checkmark timeline — one continuous track running behind the circles,
      filled up to the step reached, tick when complete. The connector meets
      the circle edge exactly so the track reads as unbroken. */
/* Each step draws the half of the track on either side of its own circle,
   inside its own box. Drawn as one segment reaching into the next step, the
   line would hang into empty space at the end of a wrapped row; kept within
   the step, the halves meet seamlessly and the track simply ends where the
   row does. */
.nxt-form-steps--check .nxt-form-step-item::before,
.nxt-form-steps--check .nxt-form-step-item::after {
	content: "";
	position: absolute;
	top: 15px;
	height: 4px;
	background: #e2e6ee;
	border-radius: 0;
}
.nxt-form-steps--check .nxt-form-step-item::before {
	left: 0;
	right: calc(50% + 17px);
}
.nxt-form-steps--check .nxt-form-step-item::after {
	left: calc(50% + 17px);
	right: 0;
}
.nxt-form-steps--check .nxt-form-step-item:first-of-type::before,
.nxt-form-steps--check .nxt-form-step-item:last-of-type::after {
	display: none;
}
/* The track fills on is-passed, so a skipped step does not break it. */
.nxt-form-steps--check .nxt-form-step-item.is-passed::before,
.nxt-form-steps--check .nxt-form-step-item.is-passed::after,
.nxt-form-steps--check .nxt-form-step-item.is-current::before {
	background: #1d9e75;
}

/* 2. Dot timeline — labels sit above the track, current step is a filled
      circle with a hollow centre. */
.nxt-form-steps--timeline .nxt-form-step-item {
	display: flex;
	flex-direction: column-reverse;
}
.nxt-form-steps--timeline .nxt-form-step-label {
	margin-bottom: 9px;
}
/* The track is centred on the circle. The dot carries a 7px bottom margin
   from the shared rules, and this design stacks in reverse, so that margin
   would lift the circle 7px clear of the track — it is dropped here and the
   4px track then centres exactly: 15 + 4/2 = 17 = half the 34px circle. */
.nxt-form-steps--timeline .nxt-form-step-dot {
	margin-bottom: 0;
}
.nxt-form-steps--timeline .nxt-form-step-item::before,
.nxt-form-steps--timeline .nxt-form-step-item::after {
	content: "";
	position: absolute;
	top: auto;
	bottom: 15px;
	height: 4px;
	background: #e2e6ee;
	border-radius: 0;
}
.nxt-form-steps--timeline .nxt-form-step-item::before {
	left: 0;
	right: calc(50% + 17px);
}
.nxt-form-steps--timeline .nxt-form-step-item::after {
	left: calc(50% + 17px);
	right: 0;
}
.nxt-form-steps--timeline .nxt-form-step-item:first-of-type::before,
.nxt-form-steps--timeline .nxt-form-step-item:last-of-type::after {
	display: none;
}
/* The track fills on is-passed, so a skipped step does not break it. */
.nxt-form-steps--timeline .nxt-form-step-item.is-passed::before,
.nxt-form-steps--timeline .nxt-form-step-item.is-passed::after,
.nxt-form-steps--timeline .nxt-form-step-item.is-current::before {
	background: #1d9e75;
}
.nxt-form-steps--timeline .nxt-form-step-item.is-current .nxt-form-step-dot::after {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
}
.nxt-form-steps--timeline .nxt-form-step-item.is-current .nxt-form-step-dot {
	font-size: 0;
}

/* 3. Numbered tabs — circle and label side by side over a short underline.
      The underline belongs to the step, so it stops short of the next one
      rather than running the width of the bar. The active step's is thicker,
      which is what marks it. */
.nxt-form-steps--tabs {
	gap: 10px;
}
/* Every underline is the same width, each one just short of its step's pitch
   — 0.94 of it, as in the preview. Sizing the tab to its own text instead
   would make the underlines ragged, long under a wordy step name and short
   under a brief one. */
.nxt-form-steps--tabs .nxt-form-step-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 16px;
	text-align: left;
}
/* A heavy rounded connector runs from each step to the next, at the height
   of the circle's centre. It is a fixed width so every one matches — the
   label takes the slack instead, otherwise a short step name would leave a
   long connector and a wordy one a stub. */
.nxt-form-steps--tabs .nxt-form-step-label {
	flex: 1 1 auto;
	min-width: 0;
}
.nxt-form-steps--tabs .nxt-form-step-item::before {
	content: "";
	order: 1;
	flex: 0 0 29px;
	height: 15px;
	margin-left: 10px;
	border-radius: 999px;
	background: #e4e2f5;
}
/* Nothing follows the last step, so it gets no connector. */
.nxt-form-steps--tabs .nxt-form-step-item:last-of-type::before {
	display: none;
}
.nxt-form-steps--tabs .nxt-form-step-item.is-passed::before {
	background: #1d9e75;
}
/* The step being filled in gets a longer connector as well as a stronger
   colour, so the eye lands on it before anything else in the row. */
.nxt-form-steps--tabs .nxt-form-step-item.is-current::before {
	flex-basis: 37px;
	background: #1717cc;
}

.nxt-form-steps--tabs .nxt-form-step-item::after {
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 2px;
	background: #e4e2f5;
}
.nxt-form-steps--tabs .nxt-form-step-item:last-of-type::after {
	display: block;
}
/* This design carries a far heavier circle than the others — in the preview
   it is half the width of its tab, against a fifth elsewhere. Sized and
   weighted to match, with the spacing above scaled to suit it. */
.nxt-form-steps--tabs .nxt-form-step-dot {
	width: 48px;
	height: 48px;
	margin: 0;
	border-width: 2px;
	font-size: 16px;
	flex: 0 0 auto;
}
.nxt-form-steps--tabs .nxt-form-step-item.is-current::after {
	height: 5px;
	background: #1717cc;
}
.nxt-form-steps--tabs .nxt-form-step-item.is-done::after {
	background: #1d9e75;
}

/* 4. Progress pill — one rounded track, filled up to the step reached. The
      steps still to come are marked by a dot; the filled part carries none,
      the same as the preview. */
.nxt-form-steps--pill {
	position: relative;
	align-items: stretch;
	gap: 0;
	padding: 0;
	border: 3px solid #d5d2ef;
	border-radius: 999px;
	overflow: hidden;
}
/* The filled steps have to read as one bar, so they are square-ended and butt
   up against each other. Rounding each step instead would cut a notch between
   two filled ones and make the progress look like separate pills. The rounded
   ends come from the track clipping its contents. */
.nxt-form-steps--pill .nxt-form-step-item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0;
	border-radius: 0;
}
.nxt-form-steps--pill .nxt-form-step-item::after {
	display: none;
}
.nxt-form-steps--pill .nxt-form-step-label {
	display: none;
}
.nxt-form-steps--pill .nxt-form-step-dot {
	width: 12px;
	height: 12px;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: #b9b5ee;
	font-size: 0;
}
/* Filled on is-passed rather than is-done: the bar shows how far along the
   visitor is, and a step skipped by conditional logic is still behind them.
   Keyed on is-done it would leave a gap in the middle of the fill. */
.nxt-form-steps--pill .nxt-form-step-item.is-current,
.nxt-form-steps--pill .nxt-form-step-item.is-passed {
	background: #1717cc;
}
/* The fill itself shows the progress, so a marker on top would double up. */
.nxt-form-steps--pill .nxt-form-step-item.is-current .nxt-form-step-dot,
.nxt-form-steps--pill .nxt-form-step-item.is-passed .nxt-form-step-dot {
	display: none;
}

/* 5. Chevron steps — arrow segments pointing forward.
      clip-path cuts a real border away with the corners, so the outline is
      drawn as a second clipped layer sitting 2px inside the first. The outer
      layer is the border colour, the inner one the fill. */
.nxt-form-steps--chevron {
	gap: 4px;
}
.nxt-form-steps--chevron .nxt-form-step-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
	min-height: 48px;
	padding: 0 20px 0 30px;
	border: 0;
	background: #d5d2ef;
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
}
.nxt-form-steps--chevron .nxt-form-step-item::before {
	content: "";
	position: absolute;
	top: 2px;
	right: 2px;
	bottom: 2px;
	left: 2px;
	background: #fff;
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
}
.nxt-form-steps--chevron .nxt-form-step-item:first-of-type,
.nxt-form-steps--chevron .nxt-form-step-item:first-of-type::before {
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}
.nxt-form-steps--chevron .nxt-form-step-item:first-of-type {
	padding-left: 20px;
}
.nxt-form-steps--chevron .nxt-form-step-item::after {
	display: none;
}
.nxt-form-steps--chevron .nxt-form-step-dot,
.nxt-form-steps--chevron .nxt-form-step-label {
	position: relative;
	z-index: 1;
}
.nxt-form-steps--chevron .nxt-form-step-dot {
	width: 22px;
	height: 22px;
	margin: 0;
	font-size: 12px;
	flex: 0 0 auto;
}
.nxt-form-steps--chevron .nxt-form-step-item.is-current,
.nxt-form-steps--chevron .nxt-form-step-item.is-done {
	background: #1717cc;
}
.nxt-form-steps--chevron .nxt-form-step-item.is-current::before,
.nxt-form-steps--chevron .nxt-form-step-item.is-done::before {
	background: #1717cc;
}
.nxt-form-steps--chevron .nxt-form-step-item.is-current .nxt-form-step-label,
.nxt-form-steps--chevron .nxt-form-step-item.is-done .nxt-form-step-label {
	color: #fff;
}
.nxt-form-steps--chevron .nxt-form-step-item.is-current .nxt-form-step-dot,
.nxt-form-steps--chevron .nxt-form-step-item.is-done .nxt-form-step-dot {
	border-color: #fff;
	background: transparent;
	color: #fff;
}

/* 6. Icon tiles — a rounded square holding the icon, with the label beside it
      and a thin rule separating one step from the next, as in the preview. */
.nxt-form-steps--tiles {
	gap: 0;
}
.nxt-form-steps--tiles .nxt-form-step-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 16px;
	text-align: left;
}
/* As in the preview, a small pill sits between the label and the rule that
   separates one step from the next. Fixed width so every one matches, with
   the label taking the slack — the same arrangement as the tabs design. */
.nxt-form-steps--tiles .nxt-form-step-label {
	flex: 1 1 auto;
	min-width: 0;
}
.nxt-form-steps--tiles .nxt-form-step-item::before {
	content: "";
	order: 1;
	flex: 0 0 15px;
	height: 9px;
	margin: 0 12px 0 10px;
	border-radius: 999px;
	background: #e4e2f5;
}
/* Nothing follows the last tile, so it carries no pill. */
.nxt-form-steps--tiles .nxt-form-step-item:last-of-type::before {
	display: none;
}
.nxt-form-steps--tiles .nxt-form-step-item.is-passed::before {
	background: #1d9e75;
}
.nxt-form-steps--tiles .nxt-form-step-item.is-current::before {
	background: #1717cc;
}

.nxt-form-steps--tiles .nxt-form-step-item::after {
	display: none;
}
.nxt-form-steps--tiles .nxt-form-step-dot {
	width: 54px;
	height: 54px;
	margin: 0;
	border: 2px solid #d5d2ef;
	border-radius: 14px;
	font-size: 16px;
	flex: 0 0 auto;
}
.nxt-form-steps--tiles .nxt-form-step-item.is-current .nxt-form-step-dot {
	border-color: #1717cc;
	background: #1717cc;
	color: #fff;
}
.nxt-form-steps--tiles .nxt-form-step-item.is-done .nxt-form-step-dot {
	border-color: #1d9e75;
	background: #1d9e75;
}

@media (max-width: 575px) {
	.nxt-form-steps--tabs .nxt-form-step-item,
	.nxt-form-steps--chevron .nxt-form-step-item,
	.nxt-form-steps--tiles .nxt-form-step-item {
		padding: 8px;
	}
	.nxt-form-steps--chevron .nxt-form-step-label,
	.nxt-form-steps--tiles .nxt-form-step-label {
		display: none;
	}
}

/* The step marker can be an icon instead of a number. It is sized to the
   dot so every one of the six designs keeps its proportions. */
.nxt-form-step-dot .nxt-step-symbol {
	display: block;
	width: 55%;
	height: 55%;
	max-width: 20px;
	max-height: 20px;
	font-size: inherit;
	line-height: 1;
	object-fit: contain;
}
.nxt-form-step-dot i.nxt-step-symbol {
	width: auto;
	height: auto;
	font-size: 0.95em;
}
.nxt-form-step-item.is-done .nxt-form-step-dot .nxt-step-symbol {
	display: none;
}

/* Completed steps in Chevron and Progress Pill.
   Both styles filled is-current and is-done/is-passed with the same blue, so a
   finished step looked identical to the one the visitor is on. The other four
   designs already read green (#1d9e75) for done and blue (#1717cc) for current,
   so these follow the same language. :not(.is-current) keeps the current step
   blue even once it is also marked passed. */
.nxt-form-steps--chevron .nxt-form-step-item.is-done:not( .is-current ) {
	background: #1d9e75;
}
.nxt-form-steps--chevron .nxt-form-step-item.is-done:not( .is-current )::before {
	background: #1d9e75;
}
/* The tick is drawn with a white border, so the dot stays hollow and the mark
   reads against the green chevron. */
.nxt-form-steps--chevron .nxt-form-step-item.is-done:not( .is-current ) .nxt-form-step-dot {
	border-color: #fff;
	background: transparent;
}
.nxt-form-steps--chevron .nxt-form-step-item.is-done:not( .is-current ) .nxt-form-step-dot::after {
	content: "";
	width: 5px;
	height: 9px;
	margin-top: -2px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}
.nxt-form-steps--chevron .nxt-form-step-item.is-done:not( .is-current ) .nxt-form-step-dot .nxt-step-symbol {
	display: none;
}

/* Pill keys on is-passed so a step skipped by conditional logic does not leave
   a gap in the bar; the current segment stays blue on top of that. */
.nxt-form-steps--pill .nxt-form-step-item.is-passed:not( .is-current ) {
	background: #1d9e75;
}
.nxt-form-steps--pill .nxt-form-step-item.is-current {
	background: #1717cc;
}