.iti {
    --iti-path-flags-1x: url("../Images/flags.webp");
    --iti-path-flags-2x: url("../Images/flags.webp");
}

.stylish-checkbox {
    margin-top: 1.25rem;
}

.form-row.with-button {
        position: relative;
        padding-right: 50px;
    }

.form-row.with-button .input-wrapper {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

.form-row.with-button button {
            position: absolute;
            right: 0;
            top: 0;
            border: 0;
            width: 50px;
            height: 50px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            background-color: #f2f2f2;
            padding: 0;
            transition: all 0.2s ease-in-out;
        }

.form-row.with-button button:hover {
                cursor: pointer;
                background-color: #ebe2e2;
            }

.form-row .input-wrapper {
        position: relative;
        height: 3.125rem;
        display: flex;
        flex-direction: column;
        background-color: transparent;
        border-radius: 5px;
        border: 0.0625rem solid #5b6679;
    }

.form-row .input-wrapper label {
            position: absolute;
            top: 0.5rem;
            inset-inline-start: 1.25rem;
            color: #fff;
            font-size: 0.875rem;
            letter-spacing: 0.009375rem;
            line-height: 0.875rem;
            font-weight: 400;
            touch-action: manipulation;
            transition: all 0.2s ease-in-out;
        }

.form-row .input-wrapper label.with-button {
                padding-right: 50px;
            }

.form-row .input-wrapper input:-webkit-autofill {
            -webkit-box-shadow: inset 0 0 0 1000px #ffffff;
            width: calc(100% - 0.125rem);
            height: calc(100% - 0.125rem);
            margin: 0.0625rem;
        }

.form-row .input-wrapper .iti input:-webkit-autofill {
                -webkit-box-shadow: inset 0 0 0 1000px #ffffff;
                width: calc(100% - 0.125rem);
                height: calc(100% - 0.5625rem);
                margin: 0.0625rem !important;
            }

.form-row .input-wrapper input,
        .form-row .input-wrapper textarea,
        .form-row .input-wrapper select {
            border: 0.0625rem solid transparent;
            display: block;
            height: 100%;
            outline: 0;
            width: 100%;
            padding: 1.25rem 1.25rem 0.625rem 1.25rem;
            resize: none;
            background: transparent;
            color: #fff;
            z-index: 2;
            font-size: 1rem;
            line-height: 1.4375rem;
            font-weight: 400;
        }

.form-row .input-wrapper input::-moz-placeholder, .form-row .input-wrapper textarea::-moz-placeholder, .form-row .input-wrapper select::-moz-placeholder {
                color: #a5a9cf;
                font-size: 0.875rem;
                line-height: 1.375rem;
            }

.form-row .input-wrapper input::placeholder, .form-row .input-wrapper textarea::placeholder, .form-row .input-wrapper select::placeholder {
                color: #a5a9cf;
                font-size: 0.875rem;
                line-height: 1.375rem;
            }

:is(.form-row .input-wrapper input):-moz-placeholder + label, :is(.form-row .input-wrapper textarea):-moz-placeholder + label, :is(.form-row .input-wrapper select):-moz-placeholder + label {
                cursor: text;
                max-width: 66.66%;
                white-space: nowrap;
                text-overflow: ellipsis;
                transform-origin: left bottom;
                transform: scale(1.1) translateY(8px);
            }

:is(.form-row .input-wrapper input):placeholder-shown + label, :is(.form-row .input-wrapper textarea):placeholder-shown + label, :is(.form-row .input-wrapper select):placeholder-shown + label {
                cursor: text;
                max-width: 66.66%;
                white-space: nowrap;
                text-overflow: ellipsis;
                transform-origin: left bottom;
                transform: scale(1.1) translateY(8px);
            }

:is(.form-row .input-wrapper input):not(:-moz-placeholder) + label, :is(.form-row .input-wrapper textarea):not(:-moz-placeholder) + label, :is(.form-row .input-wrapper select):not(:-moz-placeholder) + label {
                transform: scale(1) translateY(calc(-1 * 0.25rem));

                cursor: pointer;
                z-index: 2;
            }

:is(.form-row .input-wrapper input):not(:placeholder-shown) + label,
            :is(.form-row .input-wrapper textarea):not(:placeholder-shown) + label,
            :is(.form-row .input-wrapper select):not(:placeholder-shown) + label,
            :is(.form-row .input-wrapper input):focus + label,
            :is(.form-row .input-wrapper textarea):focus + label,
            :is(.form-row .input-wrapper select):focus + label {
                transform: scale(1) translateY(calc(-1 * 0.25rem));

                cursor: pointer;
                z-index: 2;
            }

.form-row .input-wrapper input:focus,
            .form-row .input-wrapper textarea:focus,
            .form-row .input-wrapper select:focus,
            .form-row .input-wrapper input:focus-visible,
            .form-row .input-wrapper textarea:focus-visible,
            .form-row .input-wrapper select:focus-visible {
                border-color: var(--color-primary);
            }

.form-row .input-wrapper input.disabled, .form-row .input-wrapper textarea.disabled, .form-row .input-wrapper select.disabled {
                color: rgba(23, 34, 75, 0.36);
                padding-top: 0.75rem;
            }

.form-row .input-wrapper.textarea {
            height: 4.625rem;
        }

.form-row .input-wrapper.textarea textarea {
                padding: 0.75rem 1.25rem;
                max-height: 6rem;
            }

.form-row.mobile .input-wrapper .iti__country-container {
                bottom: 0.3125rem;
                border-radius: 0.1875rem;
            }

.form-row.mobile .input-wrapper .iti__country-container button {
                    cursor: pointer;
                }

.form-row.mobile .input-wrapper input {
                padding-top: 1.25rem;
            }

.form-row.mobile .input-wrapper label {
                left: 3rem;
                top: 0.25rem;
            }

.form-row.mobile .iti--inline-dropdown:not(.iti--container) .iti__dropdown-content {
                    z-index: 3;
                }

.validation {
    display: block;
    color: #fd5940;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.75rem;
}

.form-row.textarea label {
        position: absolute;
        top: 5px;
        inset-inline-start: 1.25rem;
        font-size: 0.875rem;
        line-height: 20px;
        color: #fff;
        z-index: 3;
        touch-action: manipulation;
        background-color: #343d4c;
        width: calc(100% - 1.25rem);
    }

.form-row.textarea .textarea-wrapper {
        position: relative;
        background-color: transparent;
        border: 0.0625rem solid #5b6679;
        margin-top: 3px;
        height: 6.875rem;
        border-radius: 0.3125rem;
    }

.form-row.textarea textarea {
        display: block;
        height: 100%;
        width: 100%;
        position: relative;
        outline: 0;
        margin-top: 0.625rem;
        height: calc(100% - 0.625rem);
        padding: 1.5625rem 1.25rem 0.625rem 1.25rem;
        resize: none;
        background: transparent;
        border: none;
        color: #fff;
        z-index: 2;
        font-size: 16px;
    }

.form-row.textarea textarea::-moz-placeholder {
            color: #fff;
        }

.form-row.textarea textarea::placeholder {
            color: #fff;
        }

:is(.form-row.textarea textarea):-moz-placeholder + label {
            cursor: text;
            max-width: 66.66%;
            white-space: nowrap;
            text-overflow: ellipsis;
            transform-origin: left bottom;
            transform: scale(1.1) translateY(0.5rem);
            -ms-transform: scale(1.1) translateY(0.5rem);
            -webkit-transform: scale(1.1) translateY(0.5rem);
            -o-transform: scale(1.1) translateY(0.5rem);
            -moz-transform: scale(1.1) translateY(0.5rem);
        }

:is(.form-row.textarea textarea):placeholder-shown + label {
            cursor: text;
            max-width: 66.66%;
            white-space: nowrap;
            text-overflow: ellipsis;
            transform-origin: left bottom;
            transform: scale(1.1) translateY(0.5rem);
            -ms-transform: scale(1.1) translateY(0.5rem);
            -webkit-transform: scale(1.1) translateY(0.5rem);
            -o-transform: scale(1.1) translateY(0.5rem);
            -moz-transform: scale(1.1) translateY(0.5rem);
        }

:is(.form-row.textarea textarea):not(:-moz-placeholder) + label {
            transform: scale(1) translateY(0);
            -ms-transform: scale(1) translateY(0);
            -webkit-transform: scale(1) translateY(0);
            -o-transform: scale(1) translateY(0);
            -moz-transform: scale(1) translateY(0);
            cursor: pointer;
        }

:is(.form-row.textarea textarea):not(:placeholder-shown) + label,
        :is(.form-row.textarea textarea):focus + label {
            transform: scale(1) translateY(0);
            -ms-transform: scale(1) translateY(0);
            -webkit-transform: scale(1) translateY(0);
            -o-transform: scale(1) translateY(0);
            -moz-transform: scale(1) translateY(0);
            cursor: pointer;
        }

:is(:dir(rtl) .form-row.textarea textarea):-moz-placeholder + label {
            transform-origin: right bottom;
        }

:is(:dir(rtl) .form-row.textarea textarea):placeholder-shown + label {
            transform-origin: right bottom;
        }

.stylish-checkbox {
    font-size: 0;
}

.stylish-checkbox [type="checkbox"] {
        border: 0;
        clip: rect(0 0 0 0);
        margin: calc(-1 * 0.0625rem);
        overflow: hidden;
        padding: 0;
        position: absolute;
        height: 1.625rem;
        width: 10.875rem;
    }

.stylish-checkbox label {
        display: inline-block;
        cursor: pointer;
        font-size: 0.9375rem;
        line-height: 1rem;
        padding: 0.625rem 0;
        border-radius: 0.1875rem;
        transition: outline 120ms ease;
    }

.stylish-checkbox label:focus-within {
        outline: 0.125rem solid black;
        outline-offset: 0.125rem;
    }

.stylish-checkbox [type="checkbox"] + span {
        display: block;
        padding-inline: 1.875rem;
        font-size: 0.875rem;
        line-height: 1.5rem;
        font-weight: 400;
        color: #fff;
        position: relative;
    }

.stylish-checkbox [type="checkbox"] + span a {
            color: #fff;
            text-decoration: underline;
        }

.stylish-checkbox [type="checkbox"] + span a:hover {
                text-decoration: none;
            }

.stylish-checkbox [type="checkbox"] + span:before {
        content: "";
        display: inline-block;
        width: 1rem;
        height: 1rem;
        background: transparent;
        box-shadow: 0 0 0 0.09375rem #fff;
        border-radius: 0.1875rem;
        position: absolute;
        inset-inline-start: 0.125rem;
        top: 50%;
        margin-top: calc(-1 * 0.5rem);
        transition: box-shadow 120ms ease;
    }

.stylish-checkbox [type="checkbox"]:checked + span:before {
        content: "";
        font-size: 0.8125rem;
        line-height: 1.5rem;
        color: #fff;
        font-weight: bold;
        text-align: center;
        background: #fff;
        background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzA3MSAwLjI5Mjg5M0MxMi4wOTc2IDAuNjgzNDE3IDEyLjA5NzYgMS4zMTY1OCAxMS43MDcxIDEuNzA3MTFMNS4yMDcxMSA4LjIwNzExQzUuMDE3MTIgOC4zOTcwOSA0Ljc1ODY3IDguNTAyNjQgNC40OSA4LjQ5OTk1QzQuMjIxMzMgOC40OTcyNiAzLjk2NTA1IDguMzg2NTcgMy43Nzg5IDguMTkyODNMMC4yNzg4OTcgNC41NDk5N0MtMC4xMDM3NDEgNC4xNTE3MSAtMC4wOTEwOCAzLjUxODY4IDAuMzA3MTc1IDMuMTM2MDRDMC43MDU0MyAyLjc1MzQgMS4zMzg0NyAyLjc2NjA2IDEuNzIxMTEgMy4xNjQzMkw0LjUxNDI5IDYuMDcxNUwxMC4yOTI5IDAuMjkyODkzQzEwLjY4MzQgLTAuMDk3NjMxMSAxMS4zMTY2IC0wLjA5NzYzMTEgMTEuNzA3MSAwLjI5Mjg5M1oiIGZpbGw9IiMxNzIyNEIiLz4KPC9zdmc+Cg==");
        background-repeat: no-repeat;
        background-position: center;
    }

.stylish-checkbox [type="checkbox"]:focus + span:before,
    .stylish-checkbox [type="checkbox"]:focus-visible + span:before {
        box-shadow:
            0 0 0 0.09375rem #fff,
            0 0 0 0.1875rem rgba(255, 255, 255, 0.6);
    }

.stylish-checkbox .validation {
        display: block;
        color: #fd5940;
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: 0.75rem;
    }

.form-row.textarea label {
        position: absolute;
        top: 5px;
        inset-inline-start: 1.25rem;
        font-size: 0.875rem;
        line-height: 20px;
        color: #fff;
        z-index: 3;
        touch-action: manipulation;
        background-color: #343d4c;
        width: calc(100% - 1.25rem);
    }

.form-row.textarea .textarea-wrapper {
        position: relative;
        background-color: transparent;
        border: 0.0625rem solid #5b6679;
        margin-top: 3px;
        height: 6.875rem;
        border-radius: 0.3125rem;
    }

.form-row.textarea textarea {
        display: block;
        height: 100%;
        width: 100%;
        position: relative;
        outline: 0;
        margin-top: 0.625rem;
        height: calc(100% - 0.625rem);
        padding: 1.5625rem 1.25rem 0.625rem 1.25rem;
        resize: none;
        background: transparent;
        border: none;
        color: #fff;
        z-index: 2;
        font-size: 16px;
    }

.form-row.textarea textarea::-moz-placeholder {
            color: #fff;
        }

.form-row.textarea textarea::placeholder {
            color: #fff;
        }

:is(.form-row.textarea textarea):-moz-placeholder + label {
            cursor: text;
            max-width: 66.66%;
            white-space: nowrap;
            text-overflow: ellipsis;
            transform-origin: left bottom;
            transform: scale(1.1) translateY(0.5rem);
            -ms-transform: scale(1.1) translateY(0.5rem);
            -webkit-transform: scale(1.1) translateY(0.5rem);
            -o-transform: scale(1.1) translateY(0.5rem);
            -moz-transform: scale(1.1) translateY(0.5rem);
        }

:is(.form-row.textarea textarea):placeholder-shown + label {
            cursor: text;
            max-width: 66.66%;
            white-space: nowrap;
            text-overflow: ellipsis;
            transform-origin: left bottom;
            transform: scale(1.1) translateY(0.5rem);
            -ms-transform: scale(1.1) translateY(0.5rem);
            -webkit-transform: scale(1.1) translateY(0.5rem);
            -o-transform: scale(1.1) translateY(0.5rem);
            -moz-transform: scale(1.1) translateY(0.5rem);
        }

:is(.form-row.textarea textarea):not(:-moz-placeholder) + label {
            transform: scale(1) translateY(0);
            -ms-transform: scale(1) translateY(0);
            -webkit-transform: scale(1) translateY(0);
            -o-transform: scale(1) translateY(0);
            -moz-transform: scale(1) translateY(0);
            cursor: pointer;
        }

:is(.form-row.textarea textarea):not(:placeholder-shown) + label,
        :is(.form-row.textarea textarea):focus + label {
            transform: scale(1) translateY(0);
            -ms-transform: scale(1) translateY(0);
            -webkit-transform: scale(1) translateY(0);
            -o-transform: scale(1) translateY(0);
            -moz-transform: scale(1) translateY(0);
            cursor: pointer;
        }

:is(:dir(rtl) .form-row.textarea textarea):-moz-placeholder + label {
            transform-origin: right bottom;
        }

:is(:dir(rtl) .form-row.textarea textarea):placeholder-shown + label {
            transform-origin: right bottom;
        }

.stylish-radio [type="radio"] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 0.0625rem;
    margin: calc(-1 * 0.0625rem);
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 0.0625rem;
}

.radio-wrapper {
    display: inline-block;
    width: 3.125rem;
}

.stylish-radio label {
    display: inline-block;
    cursor: pointer;
    font-size: 0.8125rem;
    line-height: 1rem;
    padding: 0.625rem 0;
    font-weight: 700;
}

.stylish-radio span.text {
    display: block;
    position: relative;
    padding: 0 1.5625rem;
    font-size: 0.875rem;
    line-height: 1rem;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.04em;
}

/* Base circle (unchecked look) */

.stylish-radio span.label {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    border: 0.0625rem solid #fff; /* inner white ring */
    background-color: #fff;
    position: relative;
    transition:
        background 120ms ease,
        box-shadow 120ms ease;
}

/* Checked fill */

.stylish-radio [type="radio"]:checked + span.label {
    background-color: #fff;
}

.stylish-radio [type="radio"]:checked + span.label:before {
    background: #a56e59;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

/* Optional: focus ring for accessibility */

.stylish-radio [type="radio"]:focus-visible + span:before {
    box-shadow:
        0 0 0 0.125rem #000,
        0 0 0 0.25rem #fff;
}

.select-wrapper {
    width: 100%;
    position: relative;
}

/* generic select container */

.select-wrapper .select {
    position: relative;
    width: 100%;
}

/* trigger */

.select-wrapper .select .trigger {
    position: relative;
    display: flex;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    border: 0.0625rem solid #5b6679;
    padding: 1rem 0.5rem 1rem 1.0625rem;
}

/* label inside trigger */

.select-wrapper .select .label {
    font-size: 0.875rem;
    color: #ffff;
}

/* chevron icon */

.select-wrapper .select .chevron {
    height: 1.25rem;
    width: 1.5rem;
    fill: #ffff;
    transform: translate3d(0, 0, 0);
    transition: transform 200ms;
}

/* options dropdown */

.select-wrapper .select .options {
    max-height: 11.875rem;
    overflow-y: auto;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 0;
    margin-top: 0.25rem;

    list-style: none;
    border: 1px solid #d1d5db;
    background: #fff;
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* keep your existing "hidden" class behavior */

.select-wrapper .select .options.hidden {
    display: none;
}

/* option item */

.select-wrapper .select .options li {
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    color: #1f2937;
}

.select-wrapper .select .options li:hover {
    background: #f3f4f6;
}

.select-wrapper .select .options li:focus,
.select-wrapper .select .options li:focus-visible {
    background: #f3f4f6;
    outline: none;
}

/* native select field hidden */

.select-wrapper .select .select-field,
.select-wrapper .select select[hidden] {
    display: none;
}

@media screen and (min-width: 80rem) {
    .stylish-checkbox {
        margin-top: 1.5625rem;
    }
}

form .button-submit {
    cursor: pointer;
}