@keyframes l3 {
    to {
        transform: rotate(1turn);
    }
}

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

.modal-form-container {
    display: none;
}

.popup-modal-backdrop.form-modal .modal .modal-content {
                overflow: visible;
            }

.popup-modal-backdrop .modal-form-container {
        display: block;
    }

.modal-form-container {
    border-radius: 0.5rem;
    padding: 2.125rem 1.875rem;
}

.modal-form-container .text-container .title {
            font-size: 1.25rem;
            line-height: 1.75rem;
            font-family: var(--font-secondary);
            color: var(--color-primary);
            padding-bottom: 0.625rem;
        }

.modal-form-container .text-container .text {
            color: var(--color-primary);
            font-size: 0.9375rem;
            line-height: 1.25rem;
        }

.modal-form-container .form {
        padding-top: 1.5625rem;
    }

.modal-form-container .form .bottom-container {
            display: flex;
            align-items: center;
            gap: 0.9375rem;
            justify-content: space-between;
            padding-top: 0.625rem;
            flex-direction: column;
        }

.modal-form-container .form .bottom-container .stylish-checkbox {
                margin-top: 0;
            }

.modal-form-container .form .text-field {
            padding-top: 1.5625rem;
            color: #fff;
            font-size: 0.9375rem;
            letter-spacing: -0.2px;
        }

.modal-form-container .form .user-container {
            display: flex;
            align-items: center;
            gap: 1.25rem;
            padding-bottom: 1.25rem;
        }

.modal-form-container .stylish-radio span.label {
            background-color: white;
            border: 0.0625rem solid var(--color-primary);
        }

.modal-form-container .stylish-radio span.text {
            color: var(--color-primary);
        }

:is(.modal-form-container .stylish-radio [type="radio"]):checked + span.label {
                background-color: white;
            }

:is(.modal-form-container .stylish-radio [type="radio"]):checked + span.label:before {
                    background: var(--color-brown);
                }

.modal-form-container .form-row {
        padding-bottom: 0.25rem;
    }

.modal-form-container .form-row .input-wrapper label {
                color: var(--color-primary);
            }

.modal-form-container .form-row .input-wrapper input,
            .modal-form-container .form-row .input-wrapper select,
            .modal-form-container .form-row .input-wrapper textarea {
                color: var(--color-primary);
                border: none;
                padding-top: 1.375rem;
            }

.modal-form-container .form-row .validation {
            display: block;
            font-size: 0.75rem;
            min-height: 1.25rem;
            line-height: 1.7;
            height: auto;
        }

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

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

.modal-form-container .form-row.mobile .input-wrapper input {
                    padding-top: 1.25rem;
                    padding-inline-start: 3rem !important;
                }

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

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

.modal-form-container .select-wrapper .select .trigger {
                padding-block: 0.75rem;
                padding-inline-start: 1.125rem;
            }

.modal-form-container .select-wrapper .select .label {
                color: var(--color-primary);
                font-size: 1rem;
            }

.modal-form-container .select-wrapper .select .options {
                max-height: 11.875rem;
                overflow-y: auto;
            }

.modal-form-container .stylish-checkbox label {
            padding: 0;
        }

:is(.modal-form-container .stylish-checkbox [type="checkbox"]) + span {
                color: var(--color-primary);
            }

:is(.modal-form-container .stylish-checkbox [type="checkbox"]) + span:before {
                    border: 0.09375rem solid var(--color-primary);
                    margin-top: calc(-1 * 0.4375rem);
                }

:is(.modal-form-container .stylish-checkbox [type="checkbox"]) + span a {
                    color: var(--color-primary);
                }

:is(.modal-form-container .stylish-checkbox [type="checkbox"]):checked + span:before {
                    background-size: 86%;
                    background-position: 50% 62%;
                }

.modal-form-container .button-container .btn {
            cursor: pointer;
        }

.modal-form-container .loader {
        position: absolute;
        inset: 0;
        background: #00000054;
        z-index: 10;
        justify-content: center;
        align-items: center;
    }

.modal-form-container .loader.hidden {
            display: none;
        }

.modal-form-container .loader.flex {
            display: flex;
        }

.modal-form-container .loader .spinner {
            width: 3.125rem;
            padding: 0.5rem;
            aspect-ratio: 1;
            border-radius: 50%;
            background: var(--color-primary);
            --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
            -webkit-mask: var(--_m);
            mask: var(--_m);
            -webkit-mask-composite: source-out;
            mask-composite: subtract;
            animation: l3 1s infinite linear;
        }

@media screen and (min-width: 48rem) {
    .modal-form-container {
        padding: 2.5rem 3.75rem;
    }
            .modal-form-container .form .bottom-container {
                flex-direction: row;
            }
}