/* Like/Dislike (0-10 net promoter scale). Mirrored in admin/css/hash-form-pro-admin.css. */
.hf-like-dislike-table {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    line-height: 1.4;
}

.hf-like-dislike-table th {
    padding: 0 0 8px;
    border: none;
    color: var(--hf-like-dislike-legend-color, inherit);
    font-size: var(--hf-like-dislike-legend-font-size, 13px);
    font-weight: 400;
    text-align: center;
    vertical-align: bottom;
}

/* Flex inside the cell, so the captions cannot collide at narrow widths. */
.hf-like-dislike-table .hf-nps-legend {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.hf-like-dislike-table .hf-not-likely,
.hf-like-dislike-table .hf-extremely-likely {
    min-width: 0;
}

.hf-like-dislike-table tbody tr {
    background: none;
    border: 0;
}

.hf-like-dislike-table tbody tr td {
    padding: 0;
    background-color: var(--hf-like-dislike-bg-color, #fff);
    border: 1px solid var(--hf-like-dislike-border-color, #ddd);
    border-left: 0;
    text-align: center;
    vertical-align: middle;
    /* Keeps the selected cell's fill inside the rounded end corners. */
    overflow: hidden;
}

.hf-like-dislike-table tbody tr td:first-of-type {
    border-left: 1px solid var(--hf-like-dislike-border-color, #ddd);
    border-radius: var(--hf-like-dislike-radius, 5px) 0 0 var(--hf-like-dislike-radius, 5px);
}

.hf-like-dislike-table tbody tr td:last-child {
    border-radius: 0 var(--hf-like-dislike-radius, 5px) var(--hf-like-dislike-radius, 5px) 0;
}

.hf-like-dislike-table tbody tr td label {
    position: relative;
    display: block;
    width: 100%;
    height: var(--hf-like-dislike-height, 40px);
    margin: 0;
    border: 0;
    color: var(--hf-like-dislike-color, #444);
    font-size: var(--hf-like-dislike-font-size, 16px);
    font-weight: 700;
    line-height: var(--hf-like-dislike-height, 40px);
    cursor: pointer;
}

.hf-like-dislike-table tbody tr td label:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.hf-like-dislike-table tbody tr td label:hover:after {
    border: 2px solid var(--hf-like-dislike-hover-border-color, var(--hf-like-dislike-selected-bg-color, #4caf50));
}

.hf-like-dislike-table tbody tr td input[type=radio]:checked + label {
    background-color: var(--hf-like-dislike-selected-bg-color, #4caf50);
    color: var(--hf-like-dislike-selected-color, #fff);
}

/* The radio is off-screen, so keyboard focus shows on the label, as hover does. */
.hf-like-dislike-table tbody tr td input[type=radio]:focus-visible + label:after {
    border: 2px solid var(--hf-like-dislike-hover-border-color, var(--hf-like-dislike-selected-bg-color, #4caf50));
}

.hf-like-dislike-table .hf-screen-reader-element {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    /* Core gives every radio a min-width that width alone does not override. */
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    word-wrap: normal !important;
}

/*===========Toggle Style===========*/
/* Private tokens read the style template's Toggle options, with fallbacks. Declaring the
   template's own names here would shadow the values it sets on #hf-container-{id}. */
.hashform-field-type-toggle {
	--hf-toggle-bgcolor: #efefef;
	--hf-toggle-activecolor: var(--hf-toggle-on-knob-color, #0fca80);
	--hf-toggle-inactivecolor: var(--hf-toggle-off-knob-color, #ff2a2b);
	--hf-toggle-on-track: var(--hf-toggle-on-track-color, color-mix(in srgb, var(--hf-toggle-activecolor) 30%, transparent));
	--hf-toggle-off-track: var(--hf-toggle-off-track-color, color-mix(in srgb, var(--hf-toggle-inactivecolor) 30%, transparent));
	--hf-toggle-height: var(--hf-toggle-size, 20px);
}

.hashform-field-type-toggle input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

.hashform-field-type-toggle .hf-filter-label,
.hashform-field-type-toggle .hf-filter-label input {
    cursor: pointer;
}
.hashform-field-type-toggle .hf-filter-label {
    display: flex;
    align-items: center;
    min-height: var(--hf-toggle-height);
    overflow: hidden;
    line-height: 1;
}

.hashform-field-type-toggle input[type=checkbox] {
    cursor: pointer;
    margin-right: 8px;
}

.hashform-field-type-toggle input[type=checkbox] {
    position: relative;
    width: calc(var(--hf-toggle-height) * 2);
    height: var(--hf-toggle-height);
}

.hashform-field-type-toggle input[type=checkbox]:before,
.hashform-field-type-toggle input[type=checkbox]:after {
    content: "";
    position: absolute;
}

.hashform-field-type-toggle input[type=checkbox]:before {
    /* Positioned explicitly, or admin styles shift the track off the knob. */
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--hf-toggle-off-track);
    border-radius: 30px;
}

.hashform-field-type-toggle input[type=checkbox]:after {
    width: calc(var(--hf-toggle-height) - 4px);
    height: calc(var(--hf-toggle-height) - 4px);
    top: 2px;
    left: 2px;
    background-color: var(--hf-toggle-inactivecolor);
    border-radius: 30px;
    transform: translate(0, 0);
    transition: all 0.3s ease;
}

.hashform-field-type-toggle input[type=checkbox]:checked:after {
    transform: translate(var(--hf-toggle-height), 0);
    background: var(--hf-toggle-activecolor);
}

.hashform-field-type-toggle input[type=checkbox]:checked:before {
    background-color: var(--hf-toggle-on-track);
}

/* The switch is drawn by the pseudo-elements, so reset the input's own box: core and themes
   give checkboxes a border that also shrinks the track. Mirrored in the admin stylesheet. */
.hashform-field-type-toggle input[type=checkbox],
.hashform-field-type-toggle input[type=checkbox]:checked,
.hashform-field-type-toggle input[type=checkbox]:focus,
.hashform-field-type-toggle input[type=checkbox]:hover {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 30px;
    background: transparent;
    box-shadow: none;
    outline: 0;
}

/* Clear core's dashicon tick, which also uses ::before on a checked box. */
.hashform-field-type-toggle input[type=checkbox]:checked:before {
    content: "";
    margin: 0;
    font-family: inherit;
    line-height: normal;
    color: transparent;
}

/* Restore a focus ring for keyboard users; the outline is removed above. */
.hashform-field-type-toggle input[type=checkbox]:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Description beside the switch */
.hashform-field-type-toggle .hf-field-content,
.hashform-field-type-toggle .hf-editor-field-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hashform-field-type-toggle .hf-field-desc {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    line-height: 1.4;
}

/* The builder wraps the switch in one more element than the front end
   does; without this it stretches and pushes the description away. */
.hashform-field-type-toggle .hf-editor-field-elements {
    flex: 0 0 auto;
}

.hf-entry-view-btn {
    display: block;
    right: 2rem;
    margin: 3px;
    text-align: center;
    color: #FFF;
    font-size: 18px;
    padding:5px;
    text-decoration:none;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 50em;
    background: #35a785;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
    transition:300ms all;
}

.hf-entry-view-btn:hover {
    opacity:.8;
}

.hf-entries-popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1000;
    width: 100%;
    background-color: rgba(94, 110, 141, 0.9);
    opacity: 0;
    visibility: hidden;
    transition:500ms all;
}

.hf-entries-popup.is-visible {
    opacity: 1;
    visibility: visible;
    transition:1s all;
}

.hf-entries-popup-container {
    transform:translateY(-50%);
    transition:500ms all;
    position: relative;
    width: 40%;
    margin: 2em auto;
    top: 5%;
    padding:5rem;
    background: #FFF;
    border-radius: .25em .25em .4em .4em;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.is-visible .hf-entries-popup-container {
    transform:translateY(0);
    transition:500ms all;
}

.hf-entries-popup-container .hf-entries-popup-close {
    position: absolute;
    top: 8px;
    font-size:0;
    right: 8px;
    width: 30px;
    height: 30px;
}

.hf-entries-popup-container .hf-entries-popup-close::before,
.hf-entries-popup-container .hf-entries-popup-close::after {
    content: '';
    position: absolute;
    top: 12px;
    width: 14px;
    height: 3px;
    background-color: #8f9cb5;
}

.hf-entries-popup-container .hf-entries-popup-close::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 8px;
}

.hf-entries-popup-container .hf-entries-popup-close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 8px;
}

.hf-entries-popup-container .hf-entries-popup-close:hover:before,
.hf-entries-popup-container .hf-entries-popup-close:hover:after {
    background-color:#35a785;
    transition:300ms all;
}

/*button css*/
.hf-check-form.hf-hide-form-items + .hf-main-inner-wrapper .hf-buy-summary,
.hf-check-form.hf-hide-form-items + .hf-main-inner-wrapper .hf-form-remove-all-button,
.hf-check-form.hf-hide-form-items + .hf-main-inner-wrapper .hf-form-action-btn-wrap,
.hf-check-form.hf-hide-form-items + .hf-main-inner-wrapper .hf-suggested-items,
.hf-check-form.hf-hide-form-items + .hf-main-inner-wrapper .hf-coupon,
.hf-check-form.hf-hide-form-items + .hf-main-inner-wrapper .hf-toggle-button.hf-hide-toggle-button,
.hf-check-form.hf-hide-form-items + .hf-main-inner-wrapper .hf-free-shipping,
.hf-check-form.hf-hide-form-items + .hf-main-inner-wrapper .hf-form-button{
    display: none;
}

.hf-check-form.hf-hide-form-items + .hf-main-inner-wrapper .hf-empty-form{
    display: block;
}

.hf-toggle-button{
    position: fixed;
    z-index: var(--hf-basket-z-index, 99999);
    filter: drop-shadow(var(--hf-button-shadow-x, 0) var(--hf-button-shadow-y, 0) var(--hf-button-shadow-blur, 0) var(--hf-button-shadow-color, transparent));
}

.hf-toggle-button .hf-formpanel-toggle-btn {
    width: var(--hf-buttton-size, 80px);
    height: var(--hf-buttton-size, 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #9676f8;
    transition: all ease 0.3s;
    color: var(--hf-trigger-btn-font-color, #fff);
    font-size: var(--hf-trigger-btn-icon-size, 32px);
    cursor: pointer;
    overflow: hidden;
}

.hf-toggle-button .hf-formpanel-toggle-btn:hover{
    color: var(--hf-trigger-btn-hover-font-color, var(--hf-trigger-btn-font-color, #fff));
}

.hf-toggle-button:hover .hf-idle-animation{
    animation: none;
    -webkit-animation: none;
}

.hf-left-middle .hf-toggle-button{
    top: 50%;
    left: var(--hf-basket-offset-left, 20px);
    transform: translateY(-50%);
}

.hf-right-middle .hf-toggle-button{
    top: 50%;
    right: var(--hf-basket-offset-right, 20px);
    transform: translateY(-50%);
}

.hf-left-top .hf-toggle-button{
    left: var(--hf-basket-offset-left, 20px);
    top: var(--hf-basket-offset-top, 20px);
}

.hf-left-bottom .hf-toggle-button{
    left: var(--hf-basket-offset-left, 20px);
    bottom: var(--hf-basket-offset-bottom, 20px);
}

.hf-right-top .hf-toggle-button{
    right: var(--hf-basket-offset-right, 20px);
    top: var(--hf-basket-offset-top, 20px);
}

.hf-right-bottom .hf-toggle-button{
    right: var(--hf-basket-offset-right, 20px);
    bottom: var(--hf-basket-offset-bottom, 20px);
}

.hf-center-bottom .hf-toggle-button{
    left: 50%;
    bottom: var(--hf-basket-offset-bottom, 20px);
    transform: translate(-50%, 0);
}

.hf-toggle-button.hf-square .hf-item-count-wrap{
    border-radius: 0;
}

.hf-toggle-button.hf-round .hf-formpanel-toggle-btn{
    border-radius: 100%;
}

.hf-toggle-button.hf-rounded_square .hf-formpanel-toggle-btn{
    border-radius: 10px;
}

.hf-toggle-button.hf-rounded_square .hf-item-count-wrap {
    border-radius: 5px;
}

.hf-toggle-button.hf-triangle .hf-toggle-open-btn {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.hf-toggle-button.hf-triangle .hf-formpanel-icon {
    transform: translateY(calc(var(--hf-buttton-size, 80px)/10));
}

.hf-toggle-button.hf-rhombus .hf-toggle-open-btn {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.hf-toggle-button.hf-pentagon .hf-toggle-open-btn {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.hf-toggle-button.hf-pentagon .hf-formpanel-icon {
    transform: translateY(calc(var(--hf-buttton-size, 50px)/20));
}

.hf-toggle-button.hf-hexagon .hf-toggle-open-btn {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hf-toggle-button.hf-star .hf-toggle-open-btn {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.hf-toggle-button.hf-rabbet .hf-toggle-open-btn {
    clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}

.hf-toggle-button.hf-oval .hf-toggle-open-btn {
    clip-path: ellipse(50% 35% at 50% 50%);
}

.hf-toggle-button.hf-oval .hf-toggle-open-btn {
    clip-path: ellipse(35% 50% at 50% 50%);
}

.hf-toggle-button.hf-blob .hf-toggle-open-btn {
    animation: hf-border-transform 9s linear infinite;
}

@keyframes hf-border-transform {
    0%,
    100% {
        border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    }
    14% {
        border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
    }
    28% {
        border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
    }
    42% {
        border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
    }
    56% {
        border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
    }
    70% {
        border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
    }
    84% {
        border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
    }
}

.hf-toggle-button .hf-formpanel-img{
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hf-toggle-button .hf-formpanel-img img{
    height: auto;
    width: var(--hf-trigger-btn-image-size, 100%);
}

.hf-formpanel-icon.hf-formpanel-close-icon{
    display: none;
}

.hf-toggle-btn-open .hf-formpanel-icon.hf-formpanel-open-icon{
    display: none;
}

.hf-toggle-btn-open .hf-formpanel-icon.hf-formpanel-close-icon{
    display: flex;
}

/*mini button css*/
.hf-item-count-wrap {
    position: absolute;
    width: 25px;
    height: 25px;
    background: var(--hf-form-total-box-bg-color, #4b3392);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--hf-form-total-box-text-color, #FFF);
    border-radius: 100%;
}

.hf-left-top .hf-item-count-wrap,
.hf-left-middle .hf-item-count-wrap,
.hf-left-bottom .hf-item-count-wrap{
    right: 0;
}

.hf-right-top .hf-item-count-wrap,
.hf-right-middle .hf-item-count-wrap,
.hf-right-bottom .hf-item-count-wrap{
    left: 0;
}

.hf-left-bottom .hf-item-count-wrap,
.hf-right-bottom .hf-item-count-wrap{
    top: 0;
}

.hf-left-top .hf-item-count-wrap,
.hf-right-top .hf-item-count-wrap,
.hf-left-middle .hf-item-count-wrap,
.hf-right-middle .hf-item-count-wrap{
    bottom: 0;
}

.hf-center-bottom .hf-item-count-wrap{
    bottom: 100% !important;
    top: auto !important;
    left: 50% !important;
    transform: translate(-50%, 50%) !important;
}

.hf-left-top .hf-toggle-button.hf-rounded_square .hf-item-count-wrap,
.hf-left-top .hf-toggle-button.hf-square .hf-item-count-wrap,
.hf-left-top .hf-toggle-button.hf-triangle .hf-item-count-wrap,
.hf-left-middle .hf-toggle-button.hf-rounded_square .hf-item-count-wrap,
.hf-left-middle .hf-toggle-button.hf-square .hf-item-count-wrap,
.hf-left-middle .hf-toggle-button.hf-triangle .hf-item-count-wrap,
.hf-left-bottom .hf-toggle-button.hf-triangle .hf-item-count-wrap{
    transform: translate(50%, 50%);
}

.hf-right-top .hf-toggle-button.hf-rounded_square .hf-item-count-wrap,
.hf-right-top .hf-toggle-button.hf-square .hf-item-count-wrap,
.hf-right-top .hf-toggle-button.hf-triangle .hf-item-count-wrap,
.hf-right-middle .hf-toggle-button.hf-rounded_square .hf-item-count-wrap,
.hf-right-middle .hf-toggle-button.hf-square .hf-item-count-wrap,
.hf-right-middle .hf-toggle-button.hf-triangle .hf-item-count-wrap,
.hf-right-bottom .hf-toggle-button.hf-triangle .hf-item-count-wrap{
    transform: translate(-50%, 50%);
}

.hf-right-bottom .hf-toggle-button.hf-rounded_square .hf-item-count-wrap,
.hf-right-bottom .hf-toggle-button.hf-square .hf-item-count-wrap{
    transform: translate(-50%, -50%);
}

.hf-left-bottom .hf-toggle-button.hf-rounded_square .hf-item-count-wrap,
.hf-left-bottom .hf-toggle-button.hf-square .hf-item-count-wrap{
    transform: translate(50%, -50%);
}

.hf-left-bottom .hf-toggle-button.hf-triangle .hf-item-count-wrap,
.hf-right-bottom .hf-toggle-button.hf-triangle .hf-item-count-wrap{
    bottom: 0;
    top: auto;
}

.hf-toggle-button.hf-rhombus .hf-item-count-wrap{
    top: 50%;
    bottom: auto;
}

.hf-position-left .hf-toggle-button.hf-rabbet .hf-item-count-wrap{
    top: 50%;
    transform: translate(50%, -50%);
    bottom: auto;
}

.hf-position-right .hf-toggle-button.hf-rabbet .hf-item-count-wrap{
    top: 50%;
    transform: translate(-50%, -50%);
    bottom: auto;
}

/*overlay css*/
.hf-main-wrapper-bg{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: calc(var(--hf-basket-z-index, 99999) + 1);
    transition: all ease 0.4s;
    opacity: 0;
    visibility: hidden;
    left: 0;
    top: 0;
}

[data-overlayenable="hf-overlay-enabled"].hf-formpanel-open .hf-main-wrapper-bg {
    opacity: 0.9;
    visibility: visible;
    background-color: var(--hf-overlay-bg-color, rgba(0,0,0,0.9));
}

.hf-main-inner-wrapper{
    position: relative;
}

/* ====Animations==== */
.hf-formpop-animation-enabled{
    visibility: hidden;
    opacity: 0;
}

.hf-formpop-animation-enabled.animate--animated,
.hf-formpop-animation-enabled.hf-popup-in-view{
    visibility: visible;
    opacity: 1;
}

.hf-form-popup *{
    box-sizing: border-box;
}

.hf-form-popup a{
    color: inherit;
}

/*Slide In*/
.hf-layout-slidein .hf-form-popup {
    position: fixed;
    top: 0;
    height: 100%;
    width: 400px;
    z-index: calc(var(--hf-basket-z-index, 99999) + 2);
    background-size: cover;
    background-position: center;
}

.hf-layout-slidein.hf-position-left .hf-form-popup:not(.hf-formpop-animation-enabled) {
    left: -100%;
    transition: all 0.3s ease;
}

.hf-layout-slidein.hf-position-left .hf-form-popup.hf-active:not(.hf-formpop-animation-enabled) {
    left: 0;
}

.hf-layout-slidein.hf-position-right .hf-form-popup:not(.hf-formpop-animation-enabled) {
    right: -100%;
    transition: all 0.3s ease;
}

.hf-layout-slidein.hf-position-right .hf-form-popup.hf-active:not(.hf-formpop-animation-enabled) {
    right: 0;
}

.hf-layout-slidein.hf-position-left .hf-form-popup.hf-formpop-animation-enabled {
    left: 0; 
}

.hf-layout-slidein.hf-position-right .hf-form-popup.hf-formpop-animation-enabled {
    right: 0; 
}

/* Floating */
.hf-layout-floating .hf-form-popup {
    position: fixed;
    width: 400px;
    height: 70%;
    z-index: calc(var(--hf-basket-z-index, 99999) + 2);
}

.hf-layout-floating.hf-left-top .hf-form-popup{
    left: calc( var(--hf-buttton-size, 80px) + var(--hf-basket-offset-left, 20px) + 30px );
    top: 10px;
}

.hf-layout-floating.hf-left-middle .hf-form-popup{
    left: calc( var(--hf-buttton-size, 80px) + var(--hf-basket-offset-left, 20px) + 30px );
    top: 0;
    margin: auto 0;
    bottom: 0;
}

.hf-layout-floating.hf-left-bottom .hf-form-popup{
    left: calc( var(--hf-buttton-size, 80px) + var(--hf-basket-offset-left, 20px) + 30px );
    bottom: 10px;
}

.hf-layout-floating.hf-right-top .hf-form-popup{
    right: calc( var(--hf-buttton-size, 80px) + var(--hf-basket-offset-right, 20px) + 30px );
    top: 10px;
}

.hf-layout-floating.hf-right-middle .hf-form-popup{
    right: calc( var(--hf-buttton-size, 80px) + var(--hf-basket-offset-right, 20px) + 30px );
    top: 0;
    margin: auto 0;
    bottom: 0;
}

.hf-layout-floating.hf-right-bottom .hf-form-popup{
    right: calc( var(--hf-buttton-size, 80px) + var(--hf-basket-offset-right, 20px) + 30px );
    bottom: 10px;
}

.hf-layout-floating.hf-center-bottom .hf-form-popup{
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 80px;
}

.hf-layout-floating .hf-form-popup:not(.hf-formpop-animation-enabled) {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-40px);
    transition: all 0.3s ease;
}

.hf-layout-floating .hf-form-popup.hf-active:not(.hf-formpop-animation-enabled) {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* PopUp */
.hf-layout-popup .hf-form-popup {
    position: fixed;
    width: 80%;
    top: 15vh;
    bottom: 15vh;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: calc(var(--hf-basket-z-index, 99999) + 2);
}

.hf-layout-popup .hf-form-popup:not(.hf-formpop-animation-enabled) {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.hf-layout-popup .hf-form-popup.hf-active:not(.hf-formpop-animation-enabled) {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

/* Inside Content */
.hf-form-popup {
    color: var(--hf-default-text-color, #333);
    filter: drop-shadow(var(--hf-panel-shadow-x, 0) var(--hf-panel-shadow-y, 0) var(--hf-panel-shadow-blur, 10px) var(--hf-panel-shadow-color, rgba(0,0,0,0.1)));
    background: #FFF;
}

.hf-bg-choose_color .hf-form-popup{
    background: var(--hf-drawer-content-bg-color, #FFF);
}

.hf-bg-custom_image_bg .hf-form-popup{
    background-image: var(--hf-drawer-content-bg-image); 
    background-size: cover;
}

.hf-bg-custom_image_bg .hf-form-popup-inner{
    background: var(--hf-drawer-content-image-overlay);
}

.hf-bg-glassmorphism .hf-form-popup{
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hf-form-popup .hf-form-popup-inner{
    height: 100%;
}

.hf-form-popup-inner-section-form,
.hf-form-popup-inner-section-checkout {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.hf-header {
    position: relative;
    background: var(--hf-header-title-bg-color, transparent);
}

.hf-header h2 {
    font-size: 24px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 20px;
    border-bottom: 1px solid var(--hf-header-title-border-color, var(--hf-default-border-color, #EEE));
    color: inherit;
    justify-content: center;
}

.hf-header h2 .hf-header-icon{
    font-size: inherit;
    margin-right: 10px;
    width: 1em;
}

.hf-header h2 .hf-header-icon img{
    min-width: 24px;
}

.hf-header .hf-sub-header {
    font-size: 0.8em;
    padding: 10px 20px;
    border-bottom: 1px solid var(--hf-header-title-border-color, var(--hf-default-border-color, #EEE));
    text-align: center;
    color: var(--hf-header-title-font-color, var(--hf-default-text-color, #333));
}

.hf-header .hf-sub-header span{
    margin: 0 10px;
}

.hf-header .hf-form-close {
    position: absolute;
    height: var(--hf-close-btn-size, 40px);
    width: var(--hf-close-btn-size, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--hf-close-btn-size, 40px);
    background: var(--hf-close-bg-color, #000);
    color: var(--hf-close-icon-color, #FFF);
    top: var(--hf-close-btn-offset-top, 5px);
    cursor: pointer; 
    border-radius: var(--hf-close-btn-border-radius, 0);
}

.hf-header .hf-form-close:hover{
    background: var(--hf-close-bg-color-hov, var(--hf-close-bg-color, #000));
    color: var(--hf-close-icon-color-hov, var(--hf-close-icon-color, #FFF));
}

.hf-button-pos-right .hf-form-close {
    right: var(--hf-close-btn-offset-right, 5px);
}

.hf-button-pos-left .hf-form-close {
    left: var(--hf-close-btn-offset-left, 5px);
}

.hf-header .hf-form-close:before{
    transition: all ease 0.4s;
    font-size: 0.65em;
}

.hf-header .hf-form-close:hover:before {
    transform: rotate(360deg);
}

.hf-body {
    margin: 20px;
    height: 50%;
    flex-grow: 1;
}

.hf-loader-wrap{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
}

.hf-loader {
    width: 48px;
    height: 48px;
    border: 4px solid #888;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: hf-rotation 1s linear infinite;
}

.hf-loader::after,
.hf-loader::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    background: #666;
    width: 6px;
    height: 6px;
    transform: translate(150%, 150%);
    border-radius: 50%;
}

.hf-loader::before {
    left: auto;
    top: auto;
    right: 0;
    bottom: 0;
    transform: translate(-150%, -150%);
}

@keyframes hf-rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

.hf-form-remove-all-button{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30px;
}

.hf-form-remove-all-button a{
    background: #333;
    color: #FFF;
    padding: 10px 20px;
    border-radius: 4px;
    line-height: 1;
    font-size: 13px;
}

.hf-form-remove-all-button a:hover{
    color: #FFF;
}

.hf-cpt-active .hf-form-item-wrap{
    margin-bottom: 20px;
}

.hf-form-items-inner {
    position: relative;
}

.hf-form-items-inner .hf-item-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    line-height: 1;
    transition: all ease 0.3s;
    opacity: 0;
    visibility: hidden;
}

.hf-form-items-inner:hover .hf-item-remove {
    opacity: 1;
    visibility: visible;
}

.hf-form-items-inner .hf-item-remove a {
    color: inherit;
    outline: 0;
    border: 1px solid #FF0000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 20px;
    color: #ff0000;
    font-size: 9px;
    border-radius: 50%;
}

.hf-form-items-inner .hf-item-remove a:hover {
    color: #FF0000;
}

.hf-item-img img {
    width: 100%;
}

.hf-form-items-inner .hf-item-name {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.3;
}

.hf-form-items-inner .hf-item-name a{
    color: inherit;
}

.hf-form-items-inner .hf-item-price {
    font-size: 1.1em;
    margin-bottom: 10px;
}

.hf-form-items-inner .hf-item-qty{
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--hf-qty-change-border-color, #F1F1F1);
    align-items: stretch;
}

.hf-item-qty > *,
.hf-item-qty > .quantity > *{
    display: none;
}

.hf-item-qty > .quantity,
.hf-item-qty > .quantity > .qty[type=number],
.hf-item-qty > .hf-qty-minus,
.hf-item-qty > .hf-qty-plus{
    display: block;
}

.hf-item-qty > .quantity{
    margin: 0;
    padding: 0;
}

.hf-item-qty .hf-qty-minus,
.hf-item-qty .hf-qty-plus,
.hf-item-qty .qty {
    background: transparent;
    margin: 0;
    padding: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hf-item-qty .hf-qty-minus,
.hf-item-qty .hf-qty-plus {
    font-size: 13px;
    cursor: pointer;
    background: var(--hf-qty-change-btn-bg-color, #f1f1f1);
    color: var(--hf-qty-change-icon-color, #333);
    width: 20px;
    margin: 5px;
}

.hf-item-qty .qty::-webkit-outer-spin-button,
.hf-item-qty .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hf-form-items .hf-item-qty .qty[type=number] {
    -moz-appearance: textfield;
    width: 40px;
    height: 30px;
    outline: 0;
    box-shadow: none;
    border: 0;
    margin: 0;
    font-size: 0.8em;
    color: inherit;
    background: none;
    padding: 0;
}

/* =========== Advanced select =========== */

.hf-form-field .select2-container {
    max-width: 100%;
    width: 100% !important;
}

.hf-form-field .select2-container .select2-selection {
    background-color: var(--hf-field-bg-color-normal, transparent);
    border-color: var(--hf-field-border-color-normal, #CCC);
    border-radius: var(--hf-field-border-radius-top, 0) var(--hf-field-border-radius-right, 0) var(--hf-field-border-radius-bottom, 0) var(--hf-field-border-radius-left, 0);
    border-style: var(--hf-field-border, solid);
    border-width: var(--hf-field-border-top, 1px) var(--hf-field-border-right, 1px) var(--hf-field-border-bottom, 1px) var(--hf-field-border-left, 1px);
    color: var(--hf-field-color-normal, #666);
    font-family: var(--hf-field-typo-font-family, inherit);
    font-size: var(--hf-field-typo-font-size, inherit);
    min-height: 0;
    padding: var(--hf-field-padding-top, 8px) var(--hf-field-padding-right, 10px) var(--hf-field-padding-bottom, 8px) var(--hf-field-padding-left, 10px);
}

/* select2 marks the open state on the container, so focus styling keys off that. */
.hf-form-field .select2-container--open .select2-selection,
.hf-form-field .select2-container--focus .select2-selection {
    background-color: var(--hf-field-bg-color-focus, var(--hf-field-bg-color-normal, transparent));
    border-color: var(--hf-field-border-color-focus, var(--hf-field-border-color-normal, #CCC));
    color: var(--hf-field-color-focus, var(--hf-field-color-normal, inherit));
}

/* Single */

.hf-form-field .select2-container .select2-selection--single {
    height: auto;
}

.hf-form-field .select2-container .select2-selection--single .select2-selection__rendered {
    color: inherit;
    line-height: var(--hf-field-typo-line-height, 1.4);
    padding: 0;
}

.hf-form-field .select2-container .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: var(--hf-field-padding-right, 10px);
    top: 0;
}

/* Multiple: chips wrap rather than scroll. */

.hf-form-field .select2-container .select2-selection--multiple {
    display: block;
}

.hf-form-field .select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    width: 100%;
}

.hf-form-field .select2-container .select2-selection--multiple .select2-selection__choice {
    align-items: center;
    background: var(--hf-advanced-select-chip-bg-color, rgba(127, 127, 127, .14));
    border: 0;
    border-radius: var(--hf-advanced-select-radius, 3px);
    color: var(--hf-advanced-select-chip-color, inherit);
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 6px;
    margin: 0;
    max-width: 100%;
    padding: 3px 8px;
}

.hf-form-field .select2-container .select2-selection--multiple .select2-selection__choice__display {
    overflow-wrap: anywhere;
    padding: 0;
}

/* row-reverse above puts the remove control after the label. */
.hf-form-field .select2-container .select2-selection--multiple .select2-selection__choice__remove {
    background: none;
    border: 0;
    color: inherit;
    font-size: 1.1em;
    line-height: 1;
    margin: 0;
    opacity: .55;
    padding: 0;
    position: static;
    transition: opacity .15s ease;
    width: auto;
}

.hf-form-field .select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: none;
    color: inherit;
    opacity: 1;
}

.hf-form-field .select2-container .select2-search--inline {
    display: flex;
    flex: 1 1 60px;
}

.hf-form-field .select2-container .select2-search--inline .select2-search__field {
    background: none;
    border: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.4;
    margin: 0;
    min-height: 0;
    padding: 3px 0;
    width: 100% !important;
}

/* The dropdown is appended to <body>, so it is styled on its own, not under .hf-form-field. */
.select2-container .select2-dropdown {
    border-color: var(--hf-field-border-color-focus, var(--hf-field-border-color-normal, #CCC));
    border-radius: 4px;
    overflow: hidden;
}

.select2-container .select2-results__option {
    padding: 8px 10px;
}

/* hash-form-pro-public.js copies these two onto the dropdown as it opens. */
.select2-container .select2-results__option--highlighted[aria-selected] {
    background: var(--hf-advanced-select-highlight-bg-color, rgba(127, 127, 127, .16));
    color: var(--hf-advanced-select-highlight-color, inherit);
}

.select2-container .select2-results__option[aria-selected="true"] {
    font-weight: 600;
}

/* =========== Sortable field =========== */

ul.hf-option-list-sortable {
    display: flex;
    flex-direction: column;
    gap: var(--hf-sortable-spacing, 8px);
    margin: 0;
    padding: 0;
}

ul.hf-option-list-sortable li {
    background: var(--hf-sortable-bg-color-normal, rgba(127, 127, 127, .04));
    border: 1px solid currentColor;
    border-color: var(--hf-sortable-border-color-normal, rgba(127, 127, 127, .28));
    border-radius: var(--hf-sortable-radius, 6px);
    color: var(--hf-sortable-color-normal, inherit);
    font-size: var(--hf-sortable-font-size, inherit);
    list-style: none;
    margin: 0;
    padding: 0;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

ul.hf-option-list-sortable li:hover {
    background: var(--hf-sortable-bg-color-hover, rgba(127, 127, 127, .08));
    border-color: var(--hf-sortable-border-color-hover, rgba(127, 127, 127, .45));
    color: var(--hf-sortable-color-hover, var(--hf-sortable-color-normal, inherit));
}

ul.hf-option-list-sortable .hf-single-option {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: var(--hf-sortable-padding-top, 10px) var(--hf-sortable-padding-right, 12px) var(--hf-sortable-padding-bottom, 10px) var(--hf-sortable-padding-left, 12px);
}

/* Only the handle starts a drag, so only it advertises one. */
ul.hf-option-list-sortable .hf-drag {
    cursor: grab;
    flex: 0 0 auto;
    color: var(--hf-sortable-handle-color, inherit);
    font-size: 20px;
    line-height: 1;
    opacity: .5;
    touch-action: none;
}

ul.hf-option-list-sortable .hf-drag:active {
    cursor: grabbing;
}

ul.hf-option-list-sortable li:hover .hf-drag {
    opacity: .9;
}

ul.hf-option-list-sortable .hf-sortable-rank {
    background: var(--hf-sortable-rank-bg-color, rgba(127, 127, 127, .16));
    border-radius: 999px;
    color: var(--hf-sortable-rank-color, inherit);
    flex: 0 0 auto;
    font-size: .8em;
    font-weight: 600;
    line-height: 1;
    min-width: 1.6em;
    padding: .45em 0;
    text-align: center;
}

ul.hf-option-list-sortable .hf-sortable-label {
    flex: 1 1 auto;
    line-height: 1.4;
    min-width: 0;
    /* Long entries wrap rather than forcing the row wider. */
    overflow-wrap: anywhere;
}

/* The gap left behind while an item is in flight. */
ul.hf-option-list-sortable .hf-sortable-placeholder {
    background: var(--hf-sortable-bg-color-hover, rgba(127, 127, 127, .08));
    border: 1px dashed var(--hf-sortable-border-color-hover, rgba(127, 127, 127, .45));
    border-radius: var(--hf-sortable-radius, 6px);
    visibility: visible !important;
}

ul.hf-option-list-sortable .hf-sortable-dragging {
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .25);
}

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

    ul.hf-option-list-sortable li {
        transition: none;
    }
}

.hf-form-popup .hf-form-popup-inner-section-form {
    overflow: scroll;
}

.hf-product-search-results-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    background: var(--hf-product-results-bg-color, transparent);
    border: 1px solid var(--hf-product-results-border-color, #ddd);
    border-radius: var(--hf-product-radius, 0);
    max-height: 300px;
    overflow-y: auto;
}

.hf-product-search-results .product-result-item {
    padding: 10px;
    border-bottom: 1px solid var(--hf-product-result-border-color, #eee);
    color: var(--hf-product-result-color, inherit);
    cursor: pointer;
}

.hf-product-search-results .product-result-item:hover {
    background: var(--hf-product-result-hover-bg-color, #f0f0f0);
}

.hf-product-search-results .product-type {
    color: var(--hf-product-muted-color, #666);
    font-size: 0.8em;
    margin-left: 10px;
}

.hf-product-search-results .attribute-group {
    margin-bottom: 15px;
}

.hf-product-search-results .attribute-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.hf-product-search-results .attribute-group select {
    width: 100%;
    padding: 8px;
}

/* Chosen product card: applies only under a style template; unset values inherit. */
.hf-form-custom-style .hf-product-wrapper .product-details-container {
    background: var(--hf-product-card-bg-color, transparent);
    border: var(--hf-product-card-border-width, 0) solid var(--hf-product-card-border-color, transparent);
    border-radius: var(--hf-product-radius, 0);
    margin-top: 12px;
    padding: var(--hf-product-card-padding-top, 0) var(--hf-product-card-padding-right, 0) var(--hf-product-card-padding-bottom, 0) var(--hf-product-card-padding-left, 0);
}

.hf-form-custom-style .hf-product-wrapper .product-title {
    color: var(--hf-product-title-color, inherit);
    font-size: var(--hf-product-title-font-size, inherit);
}

.hf-form-custom-style .hf-product-wrapper .product-price {
    color: var(--hf-product-price-color, inherit);
    font-size: var(--hf-product-price-font-size, inherit);
    font-weight: 700;
}

.hf-form-custom-style .hf-product-wrapper .product-description {
    color: var(--hf-product-muted-color, inherit);
}

/*
 * Multi Step colours from the style template, declared on each piece: the template writes
 * them on #hf-container-{id} inside the form, and var() resolves where it is declared.
 */
form.hashform-form .hf-step-progress,
form.hashform-form .hf-step-bar,
form.hashform-form .hf-step-count,
form.hashform-form .hf-step-description,
.hf-step-navigation {
    --hf-step-accent: var(--hf-multi-step-accent-color, var(--hf-field-border-color-focus, #2271b1));
    --hf-step-line: var(--hf-multi-step-line-color, #e2e5ea);
    --hf-step-muted: var(--hf-multi-step-muted-color, #646970);
    --hf-step-size: var(--hf-multi-step-size, 32px);
}

/* -----------------------------------------------------------------------------
 * Multi-step progress
 * -------------------------------------------------------------------------- */
/* A step is a twelve-column grid, so its fields' hf-grid-N spans still apply. */
form.hashform-form .hf-step {
    display: none;
    grid-gap: 20px;
    grid-template-columns: repeat(12, 1fr);
}

form.hashform-form .hf-step.is-active {
    display: grid;
}

/* A full row for anything without an hf-grid-N width of its own. */
form.hashform-form .hf-step > *:not([class*="hf-grid-"]) {
    grid-column: span 12 / span 12;
}

/* The same row and column gaps a styled form sets for its container. */
.hf-form-custom-style form.hashform-form .hf-step,
form.hashform-form.hf-form-custom-style .hf-step {
    grid-gap: var(--hf-form-row-gap, 20px) var(--hf-form-column-gap, 20px);
}

/* Scoped to outrank a theme's .entry-content ol/p margins. */
form.hashform-form .hf-step-progress {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;

    /* Step names fit against the form's width, not the window's. */
    container-type: inline-size;
}

.hf-step-progress-item {
    align-items: center;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 8px;
    position: relative;
    text-align: center;
}

/* The line joining one step to the next, drawn behind the numbers. */
.hf-step-progress-item::before {
    background: var(--hf-step-line);
    content: '';
    height: 2px;
    left: -50%;
    position: absolute;
    right: 50%;
    top: calc(var(--hf-step-size) / 2 - 1px);
    transition: background-color .2s ease;
}

.hf-step-progress-item:first-child::before {
    content: none;
}

.hf-step-progress-item.is-current::before,
.hf-step-progress-item.is-done::before {
    background: var(--hf-step-accent);
}

.hf-step-progress-number {
    align-items: center;
    background: var(--hf-multi-step-number-bg-color, #fff);
    border: 2px solid var(--hf-step-line);
    border-radius: 50%;
    color: var(--hf-step-muted);
    display: flex;
    font-size: 13px;
    font-weight: 600;
    height: var(--hf-step-size);
    justify-content: center;
    position: relative;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
    width: var(--hf-step-size);
    z-index: 2;
}

.hf-step-progress-item.is-current .hf-step-progress-number {
    background: var(--hf-step-accent);
    border-color: var(--hf-step-accent);
    color: var(--hf-multi-step-number-active-color, #fff);
}

.hf-step-progress-item.is-done .hf-step-progress-number {
    border-color: var(--hf-step-accent);
    color: var(--hf-step-accent);
}

/* A tick in place of the number once a step is behind you. */
.hf-step-progress-item.is-done .hf-step-progress-number {
    font-size: 0;
}

.hf-step-progress-item.is-done .hf-step-progress-number::after {
    border-bottom: 2px solid var(--hf-step-accent);
    border-left: 2px solid var(--hf-step-accent);
    content: '';
    height: 5px;
    margin-top: -2px;
    transform: rotate(-45deg);
    width: 10px;
}

.hf-step-progress-label {
    color: var(--hf-step-muted);
    font-size: var(--hf-multi-step-font-size, 13px);
    line-height: 1.3;
    /* Keeps a two line name from making its step wider than its neighbours. */
    overflow-wrap: break-word;
}

/* Inherits the text colour unless the Multi Step panel sets one. */
.hf-step-progress-item.is-current .hf-step-progress-label {
    color: var(--hf-multi-step-label-active-color, inherit);
    font-weight: 600;
}

/* Only steps already passed can be returned to, so only those look clickable. */
.hf-step-progress-item.is-done {
    cursor: pointer;
}

/* A line of guidance for the step that is open. */
form.hashform-form .hf-step-description {
    color: var(--hf-step-muted, #646970);
    font-size: 14px;
    margin: 0 0 20px;
}

/* The bar, for forms that would rather have one than a row of numbers. */
form.hashform-form .hf-step-bar {
    background: var(--hf-step-line, #e2e5ea);
    border-radius: 999px;
    height: var(--hf-multi-step-bar-height, 6px);
    margin: 0 0 20px;
    overflow: hidden;
}

.hf-step-bar-fill {
    background: var(--hf-step-accent, #2271b1);
    display: block;
    height: 100%;
    transition: width .25s ease;
}

form.hashform-form .hf-step-count {
    color: var(--hf-step-muted, #646970);
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px;
}

/* A hairline separating the navigation from the fields. */
.hf-step-navigation {
    align-items: center;
    border-top: 1px solid var(--hf-step-line, #e2e5ea);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 28px;
    padding-top: 20px;
}

.hf-step-navigation .hf-submit-wrap {
    margin: 0;
}

/* Specificity has to clear .hf-form-default-style .hf-container button. */
.hf-step-navigation button.hf-step-prev,
.hf-step-navigation button.hf-step-next {
    background: var(--hf-multi-step-prev-bg-color-normal, transparent);
    border: 1px solid var(--hf-multi-step-prev-border-color-normal, var(--hf-step-line, #e2e5ea));
    border-radius: var(--hf-multi-step-border-radius-top, 6px) var(--hf-multi-step-border-radius-right, 6px) var(--hf-multi-step-border-radius-bottom, 6px) var(--hf-multi-step-border-radius-left, 6px);
    color: var(--hf-multi-step-prev-color-normal, inherit);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: var(--hf-multi-step-padding-top, 10px) var(--hf-multi-step-padding-right, 18px) var(--hf-multi-step-padding-bottom, 10px) var(--hf-multi-step-padding-left, 18px);
    width: auto;
}

.hf-step-navigation button.hf-step-next {
    background: var(--hf-multi-step-next-bg-color-normal, var(--hf-step-accent, #2271b1));
    border-color: var(--hf-multi-step-next-border-color-normal, var(--hf-step-accent, #2271b1));
    color: var(--hf-multi-step-next-color-normal, #fff);
    margin-left: auto;
}

/* Hover rules at the weight of the free plugin's .hf-form-custom-style button:hover, placed later so they win. */
.hf-step-navigation button.hf-step-prev:hover,
.hf-step-navigation button.hf-step-prev:focus-visible {
    background: var(--hf-multi-step-prev-bg-color-hover, var(--hf-multi-step-prev-bg-color-normal, transparent));
    border-color: var(--hf-multi-step-prev-border-color-hover, var(--hf-multi-step-prev-border-color-normal, var(--hf-step-line, #e2e5ea)));
    color: var(--hf-multi-step-prev-color-hover, var(--hf-multi-step-prev-color-normal, inherit));
}

.hf-step-navigation button.hf-step-next:hover,
.hf-step-navigation button.hf-step-next:focus-visible {
    background: var(--hf-multi-step-next-bg-color-hover, var(--hf-multi-step-next-bg-color-normal, var(--hf-step-accent, #2271b1)));
    border-color: var(--hf-multi-step-next-border-color-hover, var(--hf-multi-step-next-border-color-normal, var(--hf-step-accent, #2271b1)));
    color: var(--hf-multi-step-next-color-hover, var(--hf-multi-step-next-color-normal, #fff));
}

.hf-step-navigation button.hf-step-prev:disabled:hover {
    background: var(--hf-multi-step-prev-bg-color-normal, transparent);
    border-color: var(--hf-multi-step-prev-border-color-normal, var(--hf-step-line, #e2e5ea));
    color: var(--hf-multi-step-prev-color-normal, inherit);
}

.hf-step-navigation button.hf-step-prev:disabled {
    cursor: not-allowed;
    opacity: .45;
}

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

    .hf-step-bar-fill,
    .hf-step-progress-number,
    .hf-step-progress-item::before {
        transition-duration: .001ms;
    }
}

/* Numbers only when the progress list is too narrow for step names. */
@container (max-width: 520px) {
    .hf-step-progress-label {
        display: none;
    }
}

@media (max-width: 600px) {

    /* Fallback for browsers without container queries. */
    .hf-step-progress-label {
        display: none;
    }

    .hf-step-navigation {
        flex-wrap: wrap;
    }
}

/* =========== Yes / No =========== */

.hf-toggle-yes-no {
    --hf-yesno-yes: var(--hf-yesno-yes-bg-color, #1f9254);
    --hf-yesno-no: var(--hf-yesno-no-bg-color, #d3383c);

    align-items: stretch;
    background: var(--hf-field-bg-color-normal, transparent);
    border-color: var(--hf-field-border-color-normal, #CCC);
    border-radius: var(--hf-field-border-radius-top, 6px) var(--hf-field-border-radius-right, 6px) var(--hf-field-border-radius-bottom, 6px) var(--hf-field-border-radius-left, 6px);
    border-style: var(--hf-field-border, solid);
    border-width: var(--hf-field-border-top, 1px) var(--hf-field-border-right, 1px) var(--hf-field-border-bottom, 1px) var(--hf-field-border-left, 1px);
    display: inline-flex;
    gap: 0;
    /* Clips each end to the container radius, so the fill does not spill past
       the corners when a side is chosen. */
    overflow: hidden;
    position: relative;
}

/* Off screen but still focusable, so the pair stays keyboard operable. */
.hf-toggle-yes-no input.hf-chkbox {
    height: 1px;
    left: -9999px;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    width: 1px;
}

.hf-toggle-yes-no label {
    align-items: center;
    color: var(--hf-field-color-normal, #666);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--hf-field-typo-font-family, inherit);
    font-size: var(--hf-field-typo-font-size, inherit);
    gap: .45em;
    justify-content: center;
    line-height: 1.2;
    margin: 0;
    min-width: 5.5em;
    padding: var(--hf-yesno-padding-top, .55em) var(--hf-yesno-padding-right, 1em) var(--hf-yesno-padding-bottom, .55em) var(--hf-yesno-padding-left, 1em);
    transition: background-color .15s ease, color .15s ease;
    user-select: none;
}

/* A divider drawn as a border, so it inherits the field's border colour. */
.hf-toggle-yes-no label.no {
    border-left: var(--hf-field-border-top, 1px) var(--hf-field-border, solid) var(--hf-field-border-color-normal, #CCC);
}

.hf-toggle-yes-no .hf-yesno-icon {
    fill: currentColor;
    flex: 0 0 auto;
    height: 1.1em;
    width: 1.1em;
}

.hf-toggle-yes-no label:hover {
    background: var(--hf-yesno-hover-bg-color, rgba(127, 127, 127, .08));
}

/* Chosen state. `+`, not `~`, so the first radio does not also light the second label. */
.hf-toggle-yes-no input.hf-yesno-yes:checked + label.yes {
    background: var(--hf-yesno-yes);
    color: var(--hf-yesno-yes-color, #fff);
}

.hf-toggle-yes-no input.hf-yesno-no:checked + label.no {
    background: var(--hf-yesno-no);
    color: var(--hf-yesno-no-color, #fff);
}

/* Focus shows on the label since the radio is off screen; inset so overflow does not clip it. */
.hf-toggle-yes-no input.hf-chkbox:focus-visible + label {
    outline: 2px solid currentColor;
    outline-offset: -3px;
}

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

    .hf-toggle-yes-no label {
        transition: none;
    }
}

/* Chained Select */
.hf-chained-select-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--hf-chained-select-spacing, 12px) var(--hf-chained-select-spacing, 16px);
}

.hf-chained-select-level > label {
    display: block;
    margin-bottom: 4px;
    color: var(--hf-chained-select-label-color, inherit);
    font-size: var(--hf-chained-select-font-size, 13px);
    font-weight: 500;
    opacity: .85;
}

.hf-chained-select-level > select {
    width: 100%;
    margin-bottom: 0;
}

.hf-chained-select-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed var(--hf-chained-select-border-color, rgba(0, 0, 0, .18));
    border-radius: 4px;
    font-size: 13px;
    opacity: .7;
}

/* -----------------------------------------------------------------------------
 * GDPR Agreement (mirrored in admin/css/hash-form-pro-admin.css)
 * -------------------------------------------------------------------------- */
.gdpr-content {
    align-items: flex-start;
    color: var(--hf-gdpr-agreement-color, inherit);
    display: flex;
    font-size: var(--hf-gdpr-agreement-font-size, inherit);
    gap: var(--hf-gdpr-agreement-spacing, .5em);
}

.gdpr-content a {
    color: var(--hf-gdpr-agreement-link-color, inherit);
}

.gdpr-content input[type="checkbox"] {
    flex: 0 0 auto;
    /* Lines up with the first line of the wording, not the middle of it. */
    margin-top: .25em;
}

.gdpr-content > span > *:first-child {
    margin-top: 0;
}

.gdpr-content > span > *:last-child {
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
 * Colour picker field (mirrored in admin/css/hash-form-pro-admin.css)
 * -------------------------------------------------------------------------- */
/* Selectors include .minicolors to outweigh the vendor's (0,2,0) theme rules. */
.minicolors.hf-color-field {
    --hf-cp-accent: var(--hf-color-picker-accent-color, var(--hf-field-border-color-focus, #2271b1));
    --hf-cp-surface: var(--hf-color-picker-panel-bg-color, #fff);
    --hf-cp-border: var(--hf-color-picker-border-color, #e2e5ea);
    --hf-cp-radius: var(--hf-color-picker-radius, 10px);
    --hf-cp-swatch: var(--hf-color-picker-swatch-size, 22px);
    --hf-cp-swatch-radius: var(--hf-color-picker-swatch-radius, 50%);
    --hf-cp-shadow: 0 12px 28px -8px rgba(16, 24, 40, .18), 0 4px 10px -4px rgba(16, 24, 40, .1);

    display: inline-block;
    position: relative;
    width: 100%;
}

/* The swatch: a round chip inside the field rather than a bevelled square. */
.minicolors.hf-color-field .minicolors-swatch {
    border: 1px solid var(--hf-cp-border);
    border-radius: var(--hf-cp-swatch-radius);
    height: var(--hf-cp-swatch);
    left: 9px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: border-color .15s ease, box-shadow .15s ease;
    width: var(--hf-cp-swatch);
    z-index: 2;
}

.minicolors.hf-color-field .minicolors-swatch:hover {
    border-color: var(--hf-cp-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-cp-accent) 15%, transparent);
}

.minicolors.hf-color-field .minicolors-swatch-color {
    border: none;
    border-radius: var(--hf-cp-swatch-radius);
}

/* Room for the chip; typography is left to the form styler. */
.minicolors.hf-color-field input.hf-field-color-picker {
    padding-left: calc(var(--hf-cp-swatch) + 18px);
    width: 100%;
}

/* The panel, matching the date and time pickers. */
.minicolors.hf-color-field .minicolors-panel {
    background: var(--hf-cp-surface);
    border: 1px solid var(--hf-cp-border);
    border-radius: var(--hf-cp-radius);
    box-shadow: var(--hf-cp-shadow);
    margin-top: 6px;
    padding: 10px;
    width: auto;
}

.minicolors.hf-color-field .minicolors-grid,
.minicolors.hf-color-field .minicolors-slider,
.minicolors.hf-color-field .minicolors-opacity-slider {
    border: none;
    border-radius: 6px;
    overflow: hidden;
}

.minicolors.hf-color-field .minicolors-grid {
    height: 130px;
    width: 130px;
}

.minicolors.hf-color-field .minicolors-slider,
.minicolors.hf-color-field .minicolors-opacity-slider {
    height: 130px;
    margin-left: 8px;
    width: 18px;
}

/* Round handles instead of the default hairline crosshair. */
.minicolors.hf-color-field .minicolors-grid .minicolors-picker {
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    height: 12px;
    margin: -6px 0 0 -6px;
    width: 12px;
}

.minicolors.hf-color-field .minicolors-slider .minicolors-picker,
.minicolors.hf-color-field .minicolors-opacity-slider .minicolors-picker {
    background: none;
    border: 2px solid #fff;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    height: 6px;
    margin-top: -3px;
}

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

    .minicolors.hf-color-field .minicolors-swatch {
        transition-duration: .001ms;
    }
}

/* -----------------------------------------------------------------------------
 * Signature field (mirrored in admin/css/hash-form-pro-admin.css)
 * -------------------------------------------------------------------------- */
.hf-field-signature {
    --hf-sig-accent: var(--hf-signature-accent-color, var(--hf-field-border-color-focus, #2271b1));
    --hf-sig-surface: var(--hf-signature-bg-color, #fff);
    --hf-sig-border: var(--hf-signature-border-color, #d3d8e0);
    --hf-sig-muted: var(--hf-signature-hint-color, #8c9196);
    --hf-sig-radius: var(--hf-signature-radius, 8px);
}

/* The frame is drawn here because the library sets the canvas border inline. */
.hf-field-signature .hf-signature {
    background: var(--hf-sig-surface);
    border: var(--hf-signature-border-width, 1px) solid var(--hf-sig-border);
    border-radius: var(--hf-sig-radius);
    line-height: 0;
    overflow: hidden;
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.hf-field-signature .hf-signature:hover {
    border-color: var(--hf-sig-accent);
}

.hf-field-signature .hf-signature canvas {
    display: block;
    position: relative;
    z-index: 1;
}

/* Baseline and prompt, drawn on the pad (the canvas paints its own background) and hidden once signed. */
.hf-field-signature .hf-signature-hint {
    bottom: 18px;
    color: var(--hf-sig-muted);
    font-size: 13px;
    left: 0;
    line-height: 1.4;
    pointer-events: none;
    position: absolute;
    right: 0;
    text-align: center;
    z-index: 2;
}

.hf-field-signature .hf-signature-hint:before {
    background: var(--hf-sig-border);
    content: "";
    display: block;
    height: 1px;
    margin: 0 auto 8px;
    width: 60%;
}

.hf-field-signature.hf-has-signature .hf-signature-hint {
    display: none;
}

/* ---------- Clear ---------- */

.hf-field-signature .hf-signature-actions {
    margin: 8px 0 0;
}

/* Quiet until hovered. Specificity has to clear .hf-form-default-style .hf-container button (0,2,1). */
.hf-field-signature .hf-signature-actions .hf-signature-clear-btn {
    background: var(--hf-signature-clear-bg-color-normal, transparent);
    border: 1px solid var(--hf-signature-clear-border-color-normal, var(--hf-sig-border));
    border-radius: var(--hf-signature-clear-radius, 4px);
    color: var(--hf-signature-clear-color-normal, var(--hf-sig-muted));
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 7px 12px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    width: auto;
}

.hf-field-signature .hf-signature-actions .hf-signature-clear-btn:hover,
.hf-field-signature .hf-signature-actions .hf-signature-clear-btn:focus-visible {
    background: var(--hf-signature-clear-bg-color-hover, #fdf2f2);
    border-color: var(--hf-signature-clear-border-color-hover, #d3383c);
    color: var(--hf-signature-clear-color-hover, #d3383c);
}

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

    .hf-field-signature .hf-signature,
    .hf-field-signature .hf-signature-actions .hf-signature-clear-btn {
        transition-duration: .001ms;
    }
}

/* -----------------------------------------------------------------------------
 * Date and time field (mirrored in admin/css/hash-form-pro-admin.css)
 * -------------------------------------------------------------------------- */
.hf-date-time-picker {
    --hf-dt-accent: var(--hf-date-time-icon-color-hover, var(--hf-field-border-color-focus, #2271b1));
    --hf-dt-muted: var(--hf-date-time-icon-color, #8c9196);
    --hf-dt-icon: var(--hf-date-time-icon-size, 18px);

    /* Safari and iOS otherwise shrink the control to its content. */
    -webkit-appearance: none;
    appearance: none;
    min-height: 0;
    width: 100%;
}

/* The browser's calendar button, replaced by a masked glyph so it takes the form's colour. */
.hf-date-time-picker::-webkit-calendar-picker-indicator {
    background-color: var(--hf-dt-muted);
    cursor: pointer;
    height: var(--hf-dt-icon);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='12.5' height='12.5' rx='2'/%3E%3Cpath d='M3 9h12.5M7 3.5v3M11.5 3.5v3'/%3E%3Ccircle cx='17.5' cy='16.5' r='4'/%3E%3Cpath d='M17.5 14.75v1.75l1.25.9'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='12.5' height='12.5' rx='2'/%3E%3Cpath d='M3 9h12.5M7 3.5v3M11.5 3.5v3'/%3E%3Ccircle cx='17.5' cy='16.5' r='4'/%3E%3Cpath d='M17.5 14.75v1.75l1.25.9'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: var(--hf-dt-icon) var(--hf-dt-icon);
    mask-size: var(--hf-dt-icon) var(--hf-dt-icon);
    opacity: 1;
    padding: 0;
    transition: background-color .15s ease, transform .15s ease;
    width: var(--hf-dt-icon);
}

.hf-date-time-picker:hover::-webkit-calendar-picker-indicator,
.hf-date-time-picker:focus::-webkit-calendar-picker-indicator {
    background-color: var(--hf-dt-accent);
    transform: scale(1.06);
}

/* Digits should not shift about as the value changes. */
.hf-date-time-picker::-webkit-datetime-edit {
    font-variant-numeric: tabular-nums;
}

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

    .hf-date-time-picker::-webkit-calendar-picker-indicator {
        transition-duration: .001ms;
    }
}

/* -----------------------------------------------------------------------------
 * Repeater field (mirrored in admin/css/hash-form-pro-admin.css)
 * -------------------------------------------------------------------------- */
.hf-repeater {
    --hf-rep-accent: var(--hf-repeater-accent-color, var(--hf-field-border-color-focus, #2271b1));
    --hf-rep-border: var(--hf-repeater-border-color, #e2e5ea);
    --hf-rep-muted: #646970;
    --hf-rep-danger: #d3383c;
    --hf-rep-gutter: var(--hf-repeater-spacing, 10px);
    --hf-rep-radius: var(--hf-repeater-border-radius-top, 6px) var(--hf-repeater-border-radius-right, 6px) var(--hf-repeater-border-radius-bottom, 6px) var(--hf-repeater-border-radius-left, 6px);
}

.hf-repeater .repeat-field--items {
    background: none;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    width: 100%;
}

.hf-repeater .repeat-field--items thead th {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hf-rep-border);
    color: var(--hf-repeater-header-color, var(--hf-rep-muted));
    font-size: var(--hf-repeater-header-font-size, 12px);
    font-weight: 600;
    letter-spacing: .04em;
    padding: 0 var(--hf-rep-gutter) 8px 0;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.hf-repeater .repeat-field--items td {
    background: none;
    border: 0;
    padding: 8px var(--hf-rep-gutter) 0 0;
    vertical-align: middle;
}

/* The actions column takes only what the button needs. */
.hf-repeater .repeat-field--items td:last-child,
.hf-repeater .repeat-field--items thead th:last-child {
    padding-right: 0;
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.hf-repeater .repeat-field--items .hf-repeater-cell {
    margin: 0;
    width: 100%;
}

/* Specificity has to clear .hf-form-default-style .hf-container button (0,2,1). */
.hf-repeater .repeat-field--items .hf-remove-repeater-field {
    align-items: center;
    background: var(--hf-repeater-remove-bg-color-normal, none);
    border: 1px solid var(--hf-repeater-remove-border-color-normal, var(--hf-rep-border));
    border-radius: var(--hf-rep-radius);
    color: var(--hf-repeater-remove-color-normal, var(--hf-rep-muted));
    cursor: pointer;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    width: 32px;
}

.hf-repeater .repeat-field--items .hf-remove-repeater-field:hover,
.hf-repeater .repeat-field--items .hf-remove-repeater-field:focus-visible {
    background: var(--hf-repeater-remove-bg-color-hover, #fdf2f2);
    border-color: var(--hf-repeater-remove-border-color-hover, var(--hf-rep-danger));
    color: var(--hf-repeater-remove-color-hover, var(--hf-rep-danger));
}

.hf-repeater .repeat-field--items .hf-repeater-remove-label {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.hf-repeater-footer {
    margin-top: 12px;
}

.hf-repeater .hf-repeater-footer .hf-repeater-add {
    align-items: center;
    background: var(--hf-repeater-add-bg-color-normal, none);
    border: 1px dashed var(--hf-repeater-add-border-color-normal, var(--hf-rep-border));
    border-radius: var(--hf-rep-radius);
    color: var(--hf-repeater-add-color-normal, var(--hf-rep-accent));
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    line-height: 1;
    padding: 9px 14px;
    transition: background-color .15s ease, border-color .15s ease;
    width: auto;
}

.hf-repeater .hf-repeater-footer .hf-repeater-add:hover,
.hf-repeater .hf-repeater-footer .hf-repeater-add:focus-visible {
    background: var(--hf-repeater-add-bg-color-hover, color-mix(in srgb, var(--hf-rep-accent) 8%, transparent));
    border-color: var(--hf-repeater-add-border-color-hover, var(--hf-rep-accent));
    border-style: solid;
    color: var(--hf-repeater-add-color-hover, var(--hf-repeater-add-color-normal, var(--hf-rep-accent)));
}

/* Looks disabled once the row limit is reached. */
.hf-repeater .repeat-field--items .hf-remove-repeater-field[disabled],
.hf-repeater .hf-repeater-footer .hf-repeater-add[disabled] {
    background: none;
    border-color: var(--hf-rep-border);
    border-style: solid;
    color: var(--hf-rep-muted);
    cursor: not-allowed;
    opacity: .45;
}

/* Narrow screens: each row becomes a block, with each cell's data-label in front of its value. */
@media (max-width: 600px) {

    .hf-repeater .repeat-field--items,
    .hf-repeater .repeat-field--items tbody,
    .hf-repeater .repeat-field--items tr,
    .hf-repeater .repeat-field--items td {
        display: block;
        width: auto;
    }

    .hf-repeater .repeat-field--items thead {
        display: none;
    }

    .hf-repeater .repeat-field--items tr {
        border: 1px solid var(--hf-rep-border);
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 12px;
    }

    .hf-repeater .repeat-field--items td {
        padding: 0 0 10px;
    }

    .hf-repeater .repeat-field--items td::before {
        color: var(--hf-rep-muted);
        content: attr(data-label);
        display: block;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .04em;
        margin-bottom: 4px;
        text-transform: uppercase;
    }

    .hf-repeater .repeat-field--items td:last-child {
        padding-bottom: 0;
        text-align: left;
        width: auto;
    }

    .hf-repeater .repeat-field--items td:last-child::before {
        content: none;
    }

    /* Room for a text label beside the icon. */
    .hf-repeater .repeat-field--items .hf-remove-repeater-field {
        gap: 6px;
        justify-content: flex-start;
        padding: 0 12px;
        width: auto;
    }

    .hf-repeater .repeat-field--items .hf-repeater-remove-label {
        clip: auto;
        font-size: 13px;
        font-weight: 600;
        height: auto;
        overflow: visible;
        position: static;
        width: auto;
    }
}

.hf-repeater-empty {
    color: var(--hf-rep-muted, #646970);
    font-size: 13px;
    margin: 0;
}

/* Stored rows, as shown in an entry and in notification emails. */
.hf-entry-repeater {
    border-collapse: collapse;
    width: 100%;
}

.hf-entry-repeater th,
.hf-entry-repeater td {
    border: 1px solid #e2e5ea;
    padding: 6px 10px;
    text-align: left;
}

.hf-entry-repeater th {
    background: #f7f8f9;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

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

    .hf-repeater .repeat-field--items .hf-remove-repeater-field,
    .hf-repeater .hf-repeater-footer .hf-repeater-add {
        transition-duration: .001ms;
    }
}

/* -----------------------------------------------------------------------------
 * Popup display
 * -------------------------------------------------------------------------- */

/* Freeze scrollbar: the popup script toggles this class on <html>. */
html.hf-freeze {
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Multi-step: accessible progress control and announcements
 * ------------------------------------------------------------------------ */

/* The step button carries the list item's layout and is otherwise invisible. */
.hf-step-progress-button {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    gap: 8px;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
}

/* A step you cannot jump to is not presented as something to operate. */
.hf-step-progress-button[disabled] {
    cursor: default;
    opacity: 1;
}

.hf-step-progress-button:focus-visible {
    outline: 2px solid var(--hf-step-accent, #2271b1);
    outline-offset: 3px;
}

/* Strip button styling at a weight that beats the form's two-class button rules. */
.hf-container .hf-step-progress .hf-step-progress-button,
.hf-container .hf-step-progress .hf-step-progress-button:hover,
.hf-container .hf-step-progress .hf-step-progress-button:focus,
.hf-container .hf-step-progress .hf-step-progress-button:active,
.hf-container .hf-step-progress .hf-step-progress-button[disabled],
form.hashform-form .hf-step-progress .hf-step-progress-button,
form.hashform-form .hf-step-progress .hf-step-progress-button:hover,
form.hashform-form .hf-step-progress .hf-step-progress-button:focus,
form.hashform-form .hf-step-progress .hf-step-progress-button:active,
form.hashform-form .hf-step-progress .hf-step-progress-button[disabled] {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    font: inherit;
    height: auto;
    letter-spacing: normal;
    min-height: 0;
    padding: 0;
    text-decoration: none;
    text-transform: none;
}

/* Those same rules clear the outline, so the keyboard ring is restored here. */
.hf-container .hf-step-progress .hf-step-progress-button:focus-visible,
form.hashform-form .hf-step-progress .hf-step-progress-button:focus-visible {
    outline: 2px solid var(--hf-step-accent, #2271b1);
    outline-offset: 3px;
}

.hf-container .hf-step-progress .hf-step-progress-button[disabled],
form.hashform-form .hf-step-progress .hf-step-progress-button[disabled] {
    cursor: default;
}

/* Focus moves to the step after a change; its ring is suppressed (fields keep their own). */
form.hashform-form .hf-step:focus {
    outline: none;
}

/* Screen-reader-only text; a scoped copy of the free plugin's helper. */
form.hashform-form .hf-screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ---------------------------------------------------------------------------
 * Payment field
 * ------------------------------------------------------------------------ */

/* Card tokens from the style template's Payment panel. The selected tint follows the accent unless set. */
.hf-payment-container {
    --hf-payment-card-bg: var(--hf-payment-card-bg-color, #fff);
    --hf-payment-card-border: var(--hf-payment-card-border-color, #d5d8dd);
    --hf-payment-card-accent: var(--hf-payment-accent-color, #2271b1);
    --hf-payment-card-selected-bg: var(--hf-payment-card-selected-bg-color, color-mix(in srgb, var(--hf-payment-card-accent) 6%, transparent));
}

.hf-payment-amount {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

/* Scoped to outrank a theme's .entry-content p margin, which split the amount from the choices. */
.hf-form-field.hashform-field-type-payment .hf-payment-amount {
    margin: 0 0 8px;
}

.hf-payment-amount-label {
    color: var(--hf-payment-amount-label-color, var(--hf-step-muted, #646970));
    font-size: 14px;
}

.hf-payment-amount-value {
    color: var(--hf-payment-amount-color, inherit);
    font-size: var(--hf-payment-amount-font-size, 20px);
    font-weight: 700;
    line-height: 1.2;
}

/* A quote in flight dims the previous figure rather than blanking it, to avoid flicker. */
.hf-payment-amount-updating .hf-payment-amount-value,
.hf-payment-breakdown-updating {
    opacity: 0.55;
    transition: opacity 120ms ease;
}

/* A small spinner beside the figure while a quote is out, in the text colour. */
.hf-payment-amount-spinner {
    display: none;
}

.hf-payment-amount-updating .hf-payment-amount-spinner {
    align-self: center;
    animation: hf-payment-spin 700ms linear infinite;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    box-sizing: border-box;
    display: inline-block;
    height: 14px;
    opacity: 0.7;
    width: 14px;
}

@keyframes hf-payment-spin {
    to {
        transform: rotate(360deg);
    }
}

.hf-form-field.hashform-field-type-payment .hf-payment-quote-error,
.hf-payment-quote-error {
    color: #b32d2e;
    font-size: 13px;
    margin: -4px 0 12px;
}

.hf-payment-breakdown {
    border-top: 1px solid var(--hf-step-line, #e2e5ea);
    display: grid;
    gap: 4px;
    margin: 0 0 12px;
    padding-top: 8px;
}

.hf-payment-breakdown-row {
    display: flex;
    font-size: 14px;
    justify-content: space-between;
}

.hf-payment-breakdown-label {
    color: var(--hf-step-muted, #646970);
}

/* A card per method. Colours come from the form's own custom properties where set. */
.hf-payment-options {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}

.hf-payment-option {
    margin: 0;
    position: relative;
}

/* Out of the flow but focusable, so the group is still walked with the arrow keys. */
.hf-payment-option-input {
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.hf-payment-option-label {
    align-items: center;
    background: var(--hf-payment-card-bg, #fff);
    border: 1px solid var(--hf-payment-card-border, #d5d8dd);
    border-radius: var(--hf-payment-radius, 10px);
    color: var(--hf-payment-card-color, inherit);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    justify-content: center;
    min-height: 96px;
    padding: var(--hf-payment-card-padding-top, 16px) var(--hf-payment-card-padding-right, 12px) var(--hf-payment-card-padding-bottom, 16px) var(--hf-payment-card-padding-left, 12px);
    position: relative;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.hf-payment-option-label:hover {
    border-color: var(--hf-payment-card-accent, #2271b1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.hf-payment-option-figure {
    align-items: center;
    color: var(--hf-payment-card-accent, #2271b1);
    display: flex;
    font-size: 28px;
    height: 32px;
    justify-content: center;
    line-height: 1;
}

.hf-payment-option-figure .mdi::before {
    font-size: 28px;
}

/* Every logo occupies the same box, so a wide wordmark cannot make one card taller. */
.hf-payment-option-logo {
    display: block;
    max-height: 32px;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.hf-payment-option-name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    word-break: break-word;
}

/* The tick marking the chosen card; the border and fill also show it, so colour is not the only cue. */
.hf-payment-option-check {
    align-items: center;
    background: var(--hf-payment-card-accent, #2271b1);
    border-radius: 50%;
    color: #fff;
    display: flex;
    height: 18px;
    justify-content: center;
    opacity: 0;
    position: absolute;
    right: 8px;
    top: 8px;
    transform: scale(.6);
    transition: opacity .15s ease, transform .15s ease;
    width: 18px;
}

.hf-payment-option-check::before {
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    content: "";
    height: 4px;
    margin-top: -2px;
    transform: rotate(-45deg);
    width: 8px;
}

.hf-payment-option-input:checked + .hf-payment-option-label {
    background: var(--hf-payment-card-selected-bg, rgba(34, 113, 177, .06));
    border-color: var(--hf-payment-card-accent, #2271b1);
    box-shadow: inset 0 0 0 1px var(--hf-payment-card-accent, #2271b1);
}

.hf-payment-option-input:checked + .hf-payment-option-label .hf-payment-option-check {
    opacity: 1;
    transform: scale(1);
}

/* Focus shows on the card, since its radio is out of the flow. */
.hf-payment-option-input:focus-visible + .hf-payment-option-label,
.hf-payment-option-input:focus + .hf-payment-option-label {
    outline: 2px solid var(--hf-payment-card-accent, #2271b1);
    outline-offset: 2px;
}

.hf-payment-option-input:focus:not(:focus-visible) + .hf-payment-option-label {
    outline: none;
}

.hf-payment-option-input:disabled + .hf-payment-option-label {
    cursor: not-allowed;
    opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
    .hf-payment-option-label,
    .hf-payment-option-check {
        transition: none;
    }
}

/* State messages carry their own wording, so colour is never the only cue. */
.hf-payment-state {
    border-left: 3px solid transparent;
    font-size: 14px;
    margin: 12px 0 0;
    padding: 8px 12px;
}

.hf-payment-state.is-processing,
.hf-payment-state.is-redirecting {
    background: #f6f7f7;
    border-left-color: #2271b1;
}

.hf-payment-state.is-failed {
    background: #fcf0f1;
    border-left-color: #d63638;
}

.hf-payment-state.is-cancelled {
    background: #fcf9e8;
    border-left-color: #dba617;
}

/* A form being handed to a gateway is locked, and looks it. */
.hf-payment-locked {
    opacity: 0.7;
    pointer-events: none;
}

.hf-payment-locked .hf-payment-state {
    opacity: 1;
    pointer-events: auto;
}

/* ------------------------------------------------------------------------
 * Payment receipt: the pages a buyer lands on after a gateway.
 * --------------------------------------------------------------------- */
.hf-receipt {
    --hf-receipt-accent: #2271b1;
    --hf-receipt-tint: rgba(34, 113, 177, 0.12);
    --hf-receipt-line: rgba(127, 127, 127, 0.28);
    box-sizing: border-box;
    margin: 0 auto 2.5rem;
    max-width: 40rem;
    width: 100%;
}

.hf-receipt *,
.hf-receipt *::before,
.hf-receipt *::after {
    box-sizing: inherit;
}

.hf-receipt [hidden] {
    display: none !important;
}

.hf-receipt.is-success {
    --hf-receipt-accent: #008a20;
    --hf-receipt-tint: rgba(0, 138, 32, 0.12);
}

.hf-receipt.is-pending {
    --hf-receipt-accent: #b26200;
    --hf-receipt-tint: rgba(219, 166, 23, 0.18);
}

.hf-receipt.is-failed {
    --hf-receipt-accent: #d63638;
    --hf-receipt-tint: rgba(214, 54, 56, 0.12);
}

.hf-receipt.is-refunded {
    --hf-receipt-accent: #646970;
    --hf-receipt-tint: rgba(100, 105, 112, 0.14);
}

.hf-receipt-status {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    margin: 0 0 1.5rem;
}

.hf-receipt-icon {
    align-items: center;
    background: var(--hf-receipt-tint);
    border-radius: 50%;
    color: var(--hf-receipt-accent);
    display: inline-flex;
    flex: 0 0 auto;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

.hf-receipt-icon svg {
    fill: none;
    height: 1.5rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.25;
    width: 1.5rem;
}

.hf-receipt-heading {
    min-width: 0;
    padding-top: 0.2rem;
}

.hf-receipt-title {
    font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
    line-height: 1.25;
    margin: 0 0 0.35rem;
}

.hf-receipt-lead {
    line-height: 1.6;
    margin: 0;
    opacity: 0.8;
}

.hf-receipt-card {
    border: 1px solid var(--hf-receipt-line);
    border-radius: 12px;
    overflow: hidden;
}

.hf-receipt-amount {
    align-items: baseline;
    border-bottom: 1px solid var(--hf-receipt-line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
}

.hf-receipt-amount-label {
    font-size: 0.9375rem;
    opacity: 0.75;
}

.hf-receipt-amount-value {
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.hf-receipt-details {
    margin: 0;
    padding: 0.25rem 1.5rem;
}

.hf-receipt-row {
    align-items: center;
    border-bottom: 1px solid var(--hf-receipt-line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    justify-content: space-between;
    padding: 0.8rem 0;
}

.hf-receipt-row:last-child {
    border-bottom: 0;
}

.hf-receipt-row dt {
    font-size: 0.9375rem;
    margin: 0;
    opacity: 0.75;
}

.hf-receipt-row dd {
    align-items: center;
    font-size: 0.9375rem;
    display: flex;
    flex-wrap: wrap;
    font-weight: 500;
    gap: 0.5rem;
    justify-content: flex-end;
    margin: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.hf-receipt-badge {
    align-items: center;
    background: var(--hf-receipt-tint);
    border-radius: 999px;
    color: var(--hf-receipt-accent);
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 600;
    gap: 0.4em;
    line-height: 1.4;
    padding: 0.2em 0.75em;
}

.hf-receipt-badge::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    height: 0.45em;
    width: 0.45em;
}

.hf-receipt-ref {
    background: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875em;
    padding: 0;
}

.hf-receipt-copy {
    background: transparent;
    border: 1px solid var(--hf-receipt-line);
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.3em 0.7em;
}

.hf-receipt-copy:hover {
    border-color: currentColor;
}

.hf-receipt-note {
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 1rem 0 0;
    opacity: 0.75;
}

.hf-receipt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.hf-receipt-button {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: 2.75rem;
    text-align: center;
    text-decoration: none;
}

/* One text size for both buttons, whatever the theme gives its own. */
.hf-receipt .hf-receipt-button {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Zero specificity: any theme that styles .wp-element-button wins. */
:where(.hf-receipt-button.is-primary) {
    background-color: #1d2327;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    padding: 0.65em 1.4em;
}

.hf-receipt-button.is-secondary {
    background: transparent;
    border: 1px solid var(--hf-receipt-line);
    border-radius: 8px;
    color: inherit;
    font-family: inherit;
    font-weight: 600;
    padding: 0.65em 1.4em;
}

.hf-receipt-button.is-secondary:hover {
    border-color: currentColor;
}

.hf-receipt-button:focus-visible,
.hf-receipt-copy:focus-visible {
    outline: 2px solid var(--hf-receipt-accent);
    outline-offset: 2px;
}

.hf-receipt-sr {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.hf-receipt-print,
.hf-receipt-title.is-print-only {
    display: none;
}

@media (max-width: 480px) {
    .hf-receipt-amount,
    .hf-receipt-details {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    .hf-receipt-actions {
        flex-direction: column;
    }

    .hf-receipt-button {
        width: 100%;
    }
}

/* A printed receipt is the receipt and nothing else on the page. */
@media print {
    body * {
        visibility: hidden !important;
    }

    .hf-receipt,
    .hf-receipt * {
        visibility: visible !important;
    }

    .hf-receipt {
        color: #000;
        left: 0;
        margin: 0;
        max-width: none;
        position: absolute;
        top: 0;
    }

    .hf-receipt-print {
        display: block;
        font-weight: 600;
        margin: 0 0 1.5rem;
    }

    .hf-receipt-title.is-print-only {
        display: block;
    }

    .hf-receipt-actions,
    .hf-receipt-copy {
        display: none !important;
    }

    .hf-receipt-card {
        border-color: #999;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hf-payment-amount-updating .hf-payment-amount-value,
    .hf-payment-breakdown-updating {
        transition: none;
    }

    /* Still shown, not spun. */
    .hf-payment-amount-updating .hf-payment-amount-spinner {
        animation: none;
        border-right-color: currentColor;
        border-style: dotted;
    }
}

/* ---------------------------------------------------------------------------
 * Coupon field
 * ------------------------------------------------------------------------ */

.hf-coupon-field {
    align-items: stretch;
    display: flex;
    gap: 8px;
}

.hf-coupon-field .hf-coupon-input {
    flex: 1 1 auto;
    min-width: 0;
    /* Codes are read back character by character, so they get extra letter spacing. */
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Apply is a secondary control, scoped three classes deep to outrank the (0,2,1) form button rules. */
.hf-form-field .hf-coupon-field .hf-coupon-apply {
    flex: 0 0 auto;
    white-space: nowrap;
    align-items: center;
    appearance: none;
    -webkit-appearance: none;
    background: var(--hf-coupon-apply-bg-color-normal, #f3f4f6);
    border: 1px solid var(--hf-coupon-apply-border-color-normal, #c8ccd2);
    border-radius: var(--hf-coupon-radius, 4px);
    box-shadow: none;
    color: var(--hf-coupon-apply-color-normal, inherit);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 600;
    justify-content: center;
    line-height: 1.2;
    min-height: 0;
    padding: 0 var(--hf-coupon-spacing, 18px);
    text-transform: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.hf-form-field .hf-coupon-field .hf-coupon-apply:hover {
    background: var(--hf-coupon-apply-bg-color-hover, #e5e7eb);
    border-color: var(--hf-coupon-apply-border-color-hover, #8c9196);
    color: var(--hf-coupon-apply-color-hover, var(--hf-coupon-apply-color-normal, inherit));
}

.hf-form-field .hf-coupon-field .hf-coupon-apply:active {
    background: var(--hf-coupon-apply-bg-color-hover, #d8dbe0);
}

/* Keyboard users get a ring; mouse users do not, so the button stays quiet. */
.hf-form-field .hf-coupon-field .hf-coupon-apply:focus-visible {
    outline: 2px solid var(--hf-field-border-color-focus, #2271b1);
    outline-offset: 2px;
}

.hf-form-field .hf-coupon-field .hf-coupon-apply[disabled] {
    cursor: default;
    opacity: .55;
}

/* Outcome messages carry their own wording, so colour is never the only cue. */
.hf-coupon-message {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    margin: 6px 0 0;
}

.hf-coupon-message.is-applied {
    color: var(--hf-coupon-applied-color, #00694e);
}

/* An unresolved code is a notice, not a validation error: the submission still goes through. */
.hf-coupon-message.is-rejected {
    color: var(--hf-coupon-rejected-color, var(--hf-danger, #8a2424));
}

@media (max-width: 480px) {
    .hf-coupon-field {
        flex-wrap: wrap;
    }

    .hf-form-field .hf-coupon-field .hf-coupon-apply {
        width: 100%;
        padding: 10px var(--hf-coupon-spacing, 18px);
    }
}

/* What the visitor is agreeing to be charged again, under the amount. */
.hf-payment-recurrence {
    color: var(--hf-step-muted, #646970);
    font-size: 14px;
    margin: 6px 0 0;
}

/* ===========================================================================
 * Style template options for the remaining fields
 * ======================================================================== */

/* Checkbox & Radio: only under a style template, for every native box in an .hf-choice. */
.hf-form-custom-style .hf-form-field .hf-choice input[type="checkbox"],
.hf-form-custom-style .hf-form-field .hf-choice input[type="radio"] {
    accent-color: var(--hf-checkboxradio-color, auto);
    height: var(--hf-checkboxradio-size, auto);
    width: var(--hf-checkboxradio-size, auto);
}

/* Checkbox Grid and Matrix Input: both render the same table. */
.hf-form-field .hf-checkbox-grid-container {
    border-collapse: separate;
    border-spacing: var(--hf-choice-grid-spacing, 8px) 4px;
    margin: 0;
    width: 100%;
}

.hf-form-field .hf-checkbox-grid-container th,
.hf-form-field .hf-checkbox-grid-container td {
    background: none;
    border: 0;
}

.hf-form-field .hf-checkbox-grid-container thead th {
    color: var(--hf-choice-grid-header-color, inherit);
    font-size: var(--hf-choice-grid-header-font-size, 12px);
    font-weight: 600;
    line-height: 1.3;
    padding: 8px 8px 12px;
    text-align: center;
    vertical-align: bottom;
}

.hf-form-field .hf-checkbox-grid-container tbody th[scope="row"],
.hf-form-field .hf-checkbox-grid-container tbody tr > td:first-child {
    color: var(--hf-choice-grid-label-color, inherit);
    font-size: var(--hf-choice-grid-label-font-size, inherit);
    font-weight: 500;
    line-height: 1.4;
    /* width:1% keeps the label column narrow; min-width stops short labels breaking. */
    min-width: 6em;
    padding: 8px 12px 8px 0;
    text-align: left;
    white-space: normal;
    width: 1%;
}

.hf-form-field .hf-checkbox-grid-container td.hf-choice {
    background: var(--hf-choice-grid-cell-bg-color, transparent);
    border: 1px solid var(--hf-choice-grid-border-color, transparent);
    border-radius: var(--hf-choice-grid-radius, 4px);
    padding: var(--hf-choice-grid-spacing, 8px);
    text-align: center;
    vertical-align: middle;
}

.hf-form-field .hf-checkbox-grid-container tbody tr:nth-child(odd) td.hf-choice {
    background: var(--hf-choice-grid-stripe-bg-color, rgba(127, 127, 127, .06));
}

.hf-form-field .hf-checkbox-grid-container td.hf-choice label {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0;
}

.hf-form-field .hf-checkbox-grid-container td.hf-choice input[type="checkbox"] {
    margin: 0;
}

.hf-form-field .hf-checkbox-grid-container td.hf-choice input[type="text"] {
    margin: 0;
    max-width: 100%;
    min-height: 30px;
    text-align: center;
}

/* Button field: an <a> or <span>, styled here to match the submit button. */
.hf-form-field .hf-button {
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.hf-form-field a.hf-button {
    cursor: pointer;
}

.hf-form-default-style .hf-form-field .hf-button {
    background: #333;
    border: 0;
    border-radius: 3px;
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.2;
    padding: 15px 30px;
    text-decoration: none;
    text-transform: inherit;
}

.hf-form-custom-style .hf-form-field .hf-button {
    background-color: var(--hf-button-field-bg-color-normal, var(--hf-button-bg-color-normal, #000));
    border-color: var(--hf-button-field-border-color-normal, var(--hf-button-border-color-normal, #CCC));
    border-radius: var(--hf-button-field-border-radius-top, var(--hf-button-border-radius-top, 3px)) var(--hf-button-field-border-radius-right, var(--hf-button-border-radius-right, 3px)) var(--hf-button-field-border-radius-bottom, var(--hf-button-border-radius-bottom, 3px)) var(--hf-button-field-border-radius-left, var(--hf-button-border-radius-left, 3px));
    border-style: solid;
    border-width: var(--hf-button-field-border-top, var(--hf-button-border-top, 0)) var(--hf-button-field-border-right, var(--hf-button-border-right, 0)) var(--hf-button-field-border-bottom, var(--hf-button-border-bottom, 0)) var(--hf-button-field-border-left, var(--hf-button-border-left, 0));
    box-shadow: var(--hf-button-field-shadow-normal-x, 0) var(--hf-button-field-shadow-normal-y, 0) var(--hf-button-field-shadow-normal-blur, 0) var(--hf-button-field-shadow-normal-spread, 0) var(--hf-button-field-shadow-normal-color, transparent);
    color: var(--hf-button-field-color-normal, var(--hf-button-color-normal, #FFF));
    font-family: var(--hf-button-field-typo-font-family, var(--hf-button-typo-font-family, inherit));
    font-size: var(--hf-button-field-typo-font-size, var(--hf-button-typo-font-size, 14px));
    font-style: var(--hf-button-field-typo-font-style, var(--hf-button-typo-font-style, normal));
    font-weight: var(--hf-button-field-typo-font-weight, var(--hf-button-typo-font-weight, 400));
    letter-spacing: var(--hf-button-field-typo-letter-spacing, var(--hf-button-typo-letter-spacing, normal));
    line-height: var(--hf-button-field-typo-line-height, var(--hf-button-typo-line-height, 1.2));
    padding: var(--hf-button-field-padding-top, var(--hf-button-padding-top, 15px)) var(--hf-button-field-padding-right, var(--hf-button-padding-right, 30px)) var(--hf-button-field-padding-bottom, var(--hf-button-padding-bottom, 15px)) var(--hf-button-field-padding-left, var(--hf-button-padding-left, 30px));
    text-decoration: var(--hf-button-field-typo-text-decoration, none);
    text-transform: var(--hf-button-field-typo-text-transform, var(--hf-button-typo-text-transform, inherit));
}

.hf-form-custom-style .hf-form-field a.hf-button:hover,
.hf-form-custom-style .hf-form-field a.hf-button:focus-visible {
    background-color: var(--hf-button-field-bg-color-hover, var(--hf-button-field-bg-color-normal, var(--hf-button-bg-color-hover, var(--hf-button-bg-color-normal, #000))));
    border-color: var(--hf-button-field-border-color-hover, var(--hf-button-field-border-color-normal, var(--hf-button-border-color-hover, var(--hf-button-border-color-normal, #CCC))));
    box-shadow: var(--hf-button-field-shadow-hover-x, var(--hf-button-field-shadow-normal-x, 0)) var(--hf-button-field-shadow-hover-y, var(--hf-button-field-shadow-normal-y, 0)) var(--hf-button-field-shadow-hover-blur, var(--hf-button-field-shadow-normal-blur, 0)) var(--hf-button-field-shadow-hover-spread, var(--hf-button-field-shadow-normal-spread, 0)) var(--hf-button-field-shadow-hover-color, var(--hf-button-field-shadow-normal-color, transparent));
    color: var(--hf-button-field-color-hover, var(--hf-button-field-color-normal, var(--hf-button-color-hover, var(--hf-button-color-normal, #FFF))));
}

/* Math Captcha's question and Payment's notices follow the template's label and description colours. */
.hf-form-custom-style .hf-math-captcha-container label {
    color: var(--hf-label-typo-font-color, inherit);
}

.hf-form-custom-style .hf-payment-desc {
    color: var(--hf-desc-typo-font-color, inherit);
}

/* The form takes the field font and label colour as its base, for elements without their own setting. */
.hf-form-custom-style .hf-form-preview {
    color: var(--hf-label-typo-font-color, inherit);
    font-family: var(--hf-field-typo-font-family, inherit);
}

/* ---------- Product field: cards, options and the chosen product ---------- */

.hf-product-choices {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.hf-product-choice {
    align-items: center;
    border: 1px solid var(--hf-product-result-border-color, rgba(0, 0, 0, .15));
    border-radius: var(--hf-product-radius, 6px);
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.hf-product-choice:hover {
    border-color: currentColor;
}

.hf-product-choice input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
}

.hf-product-choice.hf-product-choice-selected,
.hf-product-choice:has(input:checked) {
    border-color: var(--hf-button-bg-color, #2271b1);
    box-shadow: 0 0 0 1px var(--hf-button-bg-color, #2271b1);
}

.hf-product-choice:has(input:focus-visible) {
    outline: 2px solid var(--hf-button-bg-color, #2271b1);
    outline-offset: 2px;
}

.hf-product-choice.hf-product-soldout {
    cursor: not-allowed;
    opacity: .55;
}

.hf-product-choice-image,
.hf-product-summary-image {
    border-radius: 4px;
    flex: 0 0 auto;
    height: 48px;
    object-fit: cover;
    width: 48px;
}

.hf-product-choice-text,
.hf-product-summary-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hf-product-choice-name,
.hf-product-summary-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.hf-product-choice-price,
.hf-product-summary-price {
    font-variant-numeric: tabular-nums;
}

.hf-product-choice-desc,
.hf-product-summary-options,
.hf-product-choice-stock {
    font-size: .875em;
    opacity: .75;
}

.hf-product-wrapper .hf-product-select {
    width: 100%;
}

.hf-product-options {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    margin-top: 12px;
}

.hf-product-options[hidden],
.hf-product-summary[hidden],
.hf-product-notice[hidden],
.hf-product-summary-image[hidden] {
    display: none;
}

.hf-product-option label {
    display: block;
    font-size: .875em;
    margin-bottom: 4px;
}

.hf-product-option select {
    width: 100%;
}

.hf-product-notice {
    color: #b32d2e;
    font-size: .875em;
    margin: 8px 0 0;
}

.hf-product-summary {
    align-items: center;
    border: 1px dashed var(--hf-product-result-border-color, rgba(0, 0, 0, .2));
    border-radius: var(--hf-product-radius, 6px);
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 12px;
}

.hf-product-summary-label {
    font-size: .75em;
    letter-spacing: .04em;
    opacity: .7;
    text-transform: uppercase;
}

.hf-product-search-results .product-result-empty {
    list-style: none;
    opacity: .7;
    padding: 8px 10px;
}