#matcher-form-container {
    width: 100%;

    @media screen and (min-width:960px) {
        max-width: 798px;
        justify-content: center;
    }
}

.umbraco-forms-matcher .umbraco-forms-caption,
.umbraco-forms-matcher .umbraco-forms-hidden {
    display: none;
}

/* Label */
.umbraco-forms-matcher .umbraco-forms-legend {
    all: unset;
}

.umbraco-forms-matcher .umbraco-forms-label,
.umbraco-forms-matcher .umbraco-forms-legend {
    color: var(--color-iceland-100);
    text-align: center;
    font: var(--font-title-lg);
    margin: 0;
    padding: 0;
    margin-bottom: var(--spacing-x4);

    @media screen and (min-width:960px) {
        margin-bottom: var(--spacing-x8);
    }
}

/* Text Inputs & Location */
.umbraco-forms-matcher .matcher-text-input-wrapper:has(input[type='text']) {
    background: transparent;
    border: 1px solid var(--color-iceland-400, #EDE6D5);
    border-radius: var(--spacing-x1);
    height: 76px;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: var(--grid-gutter);
}

.umbraco-forms-matcher input[type='text'] {
    margin: 0;
    border: 0;
    outline: 0;
    padding-block: 0;
    padding-inline: var(--spacing-x3);
    background-color: transparent;
    height: 100%;
    color: var(--color-iceland-500, #D1C9B8) !important;
    text-align: center;
    font: var(--font-title-xxs);
    width: 100%;

    @media screen and (min-width: 960px) {
        text-align: left;
    }
}

.umbraco-forms-matcher input[type='text']:-webkit-autofill,
.umbraco-forms-matcher input[type='text']:-webkit-autofill:hover,
.umbraco-forms-matcher input[type='text']:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-iceland-500, #D1C9B8) !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}

.umbraco-forms-matcher input[type='text']::placeholder {
    color: var(--color-iceland-500, #D1C9B8);
    text-align: center;
    font: var(--font-title-xxs);

    @media screen and (min-width:960px) {
        text-align: start;

    }
}

.text-input-submit-button {
    width: 24px;
    height: 24px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3.71402 3.04755C3.62409 3.00364 3.523 2.98786 3.42396 3.00224C3.32492 3.01663 3.23251 3.06053 3.15878 3.12821C3.08505 3.1959 3.03343 3.28422 3.01064 3.38168C2.98785 3.47913 2.99495 3.58119 3.03102 3.67455L5.87402 11.3015C6.0417 11.7518 6.0417 12.2473 5.87402 12.6975L3.03202 20.3245C2.99614 20.4178 2.98913 20.5197 3.0119 20.617C3.03468 20.7142 3.08619 20.8024 3.15974 20.87C3.2333 20.9377 3.32549 20.9816 3.42434 20.9961C3.52318 21.0107 3.62412 20.9951 3.71402 20.9515L21.714 12.4515C21.7996 12.4111 21.872 12.3471 21.9227 12.2671C21.9734 12.187 22.0003 12.0943 22.0003 11.9995C22.0003 11.9048 21.9734 11.8121 21.9227 11.732C21.872 11.652 21.7996 11.588 21.714 11.5475L3.71402 3.04755Z' stroke='%23FBF9F6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 12H22' stroke='%23FBF9F6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    position: absolute;
    right: var(--spacing-x3);
    top: var(--spacing-x3);
}


/* CHECKBOX AND RADIO */
.umbraco-forms-matcher .radiobuttonlist.radiobuttonlist-vertical {
    gap: var(--spacing-x2);
    display: flex;
    flex-direction: column;
}

.umbraco-forms-matcher .radiobuttonlist.radiobuttonlist-vertical div,
.umbraco-forms-matcher .checkboxlist.checkboxlist-vertical div {
    display: flex;
    align-items: center;
    height: 64px;
    padding: var(--spacing-10) var(--spacing-x3);
    border-radius: var(--spacing-x1);
    border: 1px solid var(--color-iceland-700, #767168);
    margin-top: var(--spacing-4);
    cursor: pointer;
    gap: var(--spacing-12);
}

.umbraco-forms-matcher .checkboxlist.checkboxlist-vertical div::after {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 9L10.125 15L7 12.2727' stroke='%23F9F6F0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.umbraco-forms-matcher .radiobuttonlist.radiobuttonlist-vertical div label,
.umbraco-forms-matcher .checkboxlist.checkboxlist-vertical div label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    flex: 1 0 0;
    overflow: hidden;
    color: var(--color-iceland-100, #FBF9F6);
    font-feature-settings: 'dlig' on;
    text-overflow: ellipsis;

    font: var(--font-body-xs);
    margin: 0;

    cursor: pointer;

}

.umbraco-forms-matcher .checkboxlist.checkboxlist-vertical div input {
    display: none;
}

.umbraco-forms-matcher .radiobuttonlist.radiobuttonlist-vertical div input {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-iceland-500);
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;

    transition: border 0.3s ease-in-out;
}

.umbraco-forms-matcher .radiobuttonlist.radiobuttonlist-vertical div input::after {
    content: " ";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.3s ease-in-out;
}


/* CHECKBOX AND RADIO ACTIVE */
.umbraco-forms-matcher .radiobuttonlist.radiobuttonlist-vertical div input:checked {
    border: 1px solid var(--color-accent-coral, #FF5A58);
}

.umbraco-forms-matcher .radiobuttonlist.radiobuttonlist-vertical div input:checked::after {
    background: var(--color-accent-coral, #FF5A58);
}

.umbraco-forms-matcher .radiobuttonlist.radiobuttonlist-vertical div:has(input:checked),
.umbraco-forms-matcher .checkboxlist.checkboxlist-vertical div:has(input:checked) {
    border: 1px solid var(--color-iceland-100, #FBF9F6);
}

.umbraco-forms-matcher .checkboxlist.checkboxlist-vertical div:has(input:checked)::after {
    opacity: 1;
}

/* SELECT */


.matcher-custom-select-wrapper {
    position: relative;
    margin: var(--spacing-x3);
    z-index: 99;

    @media screen and (min-width:960px) {
        margin: var(--spacing-x8);
    }
}

.matcher-custom-select-trigger {
    width: 100%;
    height: 100%;
    border-radius: var(--spacing-x1);
    border: 1px solid var(--color-iceland-700, #767168);
    height: 76px;
    padding: var(--spacing-x3);
    display: flex;
    align-items: center;

    color: var(--color-iceland-500, #D1C9B8);
    font: var(--font-title-xxs);
    position: relative;
}

.matcher-custom-select-trigger::after {
    content: " ";
    position: absolute;
    right: var(--spacing-x3);
    top: var(--spacing-x3);
    width: var(--spacing-x4);
    height: var(--spacing-x4);
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6668 18.667L16.0002 13.3337L21.3335 18.667' stroke='%23F9F6F0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
}

.matcher-custom-select-menu {
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    list-style-type: none;
    overflow-y: auto;
    padding: 0 var(--spacing-20);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), var(--color-iceland-900, #34322E);
    z-index: 5;
    max-height: 0;
    opacity: 0;

    transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out, padding 0.35s ease-in-out;


    @media screen and (min-width:960px) {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: auto;
        padding: 0;
    }
}

.matcher-select-item {
    padding: var(--spacing-x1) var(--spacing-x2);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    flex: 1 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    overflow: hidden;
    color: var(--color-iceland-100, #FBF9F6);
    text-overflow: ellipsis;

    font-feature-settings: 'dlig' on;
    font: var(--font-body-xs);
}

.matcher-select-selected-item {
    background: var(--color-iceland-700, #767168);
}

.matcher-select-selected-item::after {
    content: " ";
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 9L10.125 15L7 12.2727' stroke='%23F9F6F0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.matcher-custom-select-close {
    content: " ";
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 4L4 20M4 4L20 20' stroke='%23F9F6F0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: var(--spacing-x3);
    right: var(--spacing-20);

    @media screen and (min-width:960px) {
        display: none;
    }
}

.select-menu-active .matcher-custom-select-trigger::after {
    transform: rotate(0);
}

.select-menu-active .matcher-custom-select-menu {
    max-height: 100vh;
    opacity: 1;
    padding-block: var(--spacing-x3);

    @media screen and (min-width:960px) {
        max-height: 360px;
        padding-block: 0;
    }
}

.matcher-form-back-button {
    position: fixed;
    top: var(--spacing-x2);
    left: var(--spacing-x2);
    z-index: 10;
}

.matcher-form-close-button {
    position: fixed;
    top: var(--spacing-x2);
    right: var(--spacing-x2);
    z-index: 10;
    border: none;
    background-color: transparent;
}

/* location suggestions */

.matcher-location-suggestions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-x2);
    gap: var(--spacing-x1);
    min-height: 40px;
}

.matcher-location-suggestions button {
    margin: 0;
    outline: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 var(--spacing-x2);
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.10);
    font: var(--font-body-xs);
    font-feature-settings: 'dlig' on;
    color: var(--color-iceland-100);
}


.submit-to-next-form-page-button {
    border: none;
    outline: none;
    height: 56px;
    min-width: 120px;
    padding: var(--spacing-x2) !important;
    border-radius: var(--spacing-x5) !important;
    background: var(--color-contrast-100, #FFF) !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;


    color: var(--color-iceland-1000, #1D1C1A) !important;
    text-align: center !important;
    font-feature-settings: 'dlig' on !important;
    font: var(--font-body-sm) !important;
    margin-top: auto;

    @media screen and (min-width:960px) {
        margin-inline: auto;
        width: 140px;
    }
}

.skip-form-page-button {
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-cherry-300, #FFC6C2);
    text-align: center;
    font-feature-settings: 'dlig' on;
    margin-inline: auto;
    font: var(--font-body-sm);
    width: fit-content;
    height: fit-content;
    display: block;
    margin-top: var(--spacing-12);
}

#matcher-form-container .umbraco-forms-matcher,
#matcher-form-container .umbraco-forms-matcher form,
#matcher-form-container .umbraco-forms-matcher .umbraco-forms-page {

    @media screen and (max-width:960px) {
        display: flex;
        flex-direction: column;
        flex: 1;
    }
}

#matcher-form-container .umbraco-forms-matcher .umbraco-forms-navigation {
    margin-top: auto;

    @media screen and (min-width:960px) {
        margin-top: 0;
    }
}


.umbraco-forms-matcher .field-validation-error {
    margin-top: var(--spacing-x1);
    font: var(--font-body-xs);
    text-transform: capitalize;
}

/* Single-page step visibility */
.matcher-step-hidden {
    display: none !important;
}

fieldset.umbraco-forms-fieldset.matcher-step {
    @media screen and (max-width:960px) {
        margin: auto 0;
    }
}

/* Match form page layout */
.match-form-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), var(--color-iceland-900, #34322E);
    padding: var(--spacing-x3) var(--spacing-20);
    padding-top: var(--spacing-x8);

    @media screen and (min-width:960px) {
        padding: var(--spacing-x5);
        justify-content: center;
        align-items: center;
    }
}

.match-form-page .umbraco-forms-matcher,
.match-form-page .umbraco-forms-matcher form,
.match-form-page .umbraco-forms-matcher .umbraco-forms-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;

    @media screen and (min-width:960px) {
        max-width: 798px;
        flex: none;
    }
}

.match-form-page .umbraco-forms-matcher .umbraco-forms-navigation {
    margin-top: auto;

    @media screen and (min-width:960px) {
        margin-top: var(--spacing-x5);
    }
}

.match-form-page .umbraco-forms-matcher .umbraco-forms-fieldset {
    text-align: center;
}