.register {
    position: relative;
    z-index: 1;
    padding: clamp(40px, 6vw, 80px) 0;

    @media (max-width: 767px) {
        padding: 0 0 50px 0;
    }

    .form_container {
        width: 100%;
        margin: auto;
        max-width: 744px;

        &.tiny {
            max-width: 410px;
        }
    }

    .form-group {
        position: relative;
        margin: 4px 0;

        @media (max-width: 767px) {
            font-size: 12px;
        }

        &_min {
            max-width: 280px;
            margin: 14px auto;
        }

        select {
            option {
                color: #000;
            }
        }
    }

    input[type="text"]:empty + label,
    input[type="tel"]:empty + label,
    input[type="email"]:empty + label {
        position: absolute;
        padding-left: 0px;
        top: 0.5rem;
        left: 0;
        width: 100%;
        text-align: left;
        color: #fff;
        opacity: 1;
        transition: 0.4s ease-in-out;
        box-shadow: none;
    }

    input[type="text"]:focus + label,
    input[type="email"]:focus + label,
    input[type="tel"]:focus + label,
    input[type="text"]:valid + label,
    input[type="email"]:valid + label,
    input[type="tel"]:valid + label {
        top: -.7rem;
        color: #fff;
        opacity: 1;
        font-size: .65rem;
        box-shadow: none;
    }

    input[type="email"]:focus,
    input[type="text"]:focus,
    input[type="tel"]:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-bottom: 1px solid #fff;
        box-shadow: none;
    }

    .form-control {
        border: none;
        border-bottom: 1px solid #fff;
        background-color: transparent;
        padding: .275rem 0 0 0;
        color: #fff;
        border-radius: 0;
        box-shadow: none;

        @media (max-height: 750px) {
            padding: 0;
        }

        @media (max-width: 767px) {
            font-size: 12px;
        }
    }

    .error {
        color: #ec5824;
        font-size: 12px;
        line-height: .7rem;
        margin-top: .5rem;
        text-align: left;
    }

    .logo-container {
        img {
            max-width: 200px;
            width: 100%;
        }
    }

    .checkbox {
        &.consent {
            font-size: 12px;
            margin-left: 28px;

            label {
                position: relative;
                line-height: 120%;
                text-align: left;
                padding-left: 0;
            }

            input[type="checkbox"] + label:before {
                content: '';
                width: 18px;
                height: 18px;
                position: absolute;                
                left: -28px;
                top: -2px;                
                padding-right: 10px;
                border-color: #fff;
                background-image: none;
                background-color: transparent;
                transition: var(--standard-transition);
            }

            input[type="checkbox"]:checked + label::before {
                background: url(/application/isolated/conference/odd/images/checkbox_checked.svg) no-repeat;
                border-color: var(--orange);
            }
        }
    }

    .org {
        padding: 0;

        &:hover {
            background-color: transparent;
        }
    }
}

.form-group.ui-dropdown {
        .ui {
            &.selection.dropdown {
            border: none;
            border-bottom: 1px solid #fff;
            padding: 0.375rem 0;
            background-color: transparent;
            border-radius: 0;

            & > input.search {
                padding: 0;
                color: #fff;
            }

            .default.text {
                color: #fff;
            }
            
            &.search.dropdown > .text {
                top: 5px;
                transition: .4s ease-in-out;
                color: #fff;
            }

            &.visible {
                box-shadow: none;
                border-color: transparent;
            }

            &.active {
                &:hover {
                    box-shadow: none;
                    border-color: transparent;
                }
            }
        }
    }

    .organization-dropdown.js-autocomplete-company {
        &:has(input.search:focus) {
            .default.text {
                font-size: 12px;
                top: -20px;
                color: #fff;
            }
        }

        .default.text {
            color: #fff;

            .filtered {
                font-size: 12px;
                top: -20px;
                visibility: visible;
            }
        }
    }
}

.checkbox-group {
    font-size: 12px;
    padding-left: 28px;
    width: calc(50% - 20px);

    @media (max-width: 767px) {
        width: 100%;
    }

    input[type=checkbox] {
        & + label {
            position: relative;

            &:before {
                content: '';
                width: 18px;
                height: 18px;
                position: absolute;
                left: -28px;
                top: 2px;
                background: url(/application/isolated/conference/odd/images/checkbox.svg) no-repeat;
                padding-right: 10px;
            }
        }

        &:checked + label {
            &:before {
                background: url(/application/isolated/conference/odd/images/checkbox_checked.svg) no-repeat;
            }
        }
    }
}

.city-flex {
    display: flex;
    gap: clamp(0.5rem, 0.3786rem + 0.5178vw, 1rem);
    position: relative;

    @media (max-width: 767px) {
        flex-wrap: wrap;
    }

    .area {
        display: flex;
        justify-content: space-between;
        cursor: pointer;

        &.active {
            .area-check {
                &:before {
                    background-color: var(--orange);
                    border-color: var(--orange);
                    background-image: url(/application/isolated/conference/odd/images/check-mark.svg);
                }
            }
        }
    }
}

.city-flex__element {
    height: 50px;
    transition: var(--standard-transition);

    .city-name {
        background-color: transparent;
        border: 1px solid #fff;
        border-radius: var(--radius-huge);
        padding: clamp(0.25rem, 0.1893rem + 0.2589vw, 0.5rem) clamp(0.5rem, 0.4393rem + 0.2589vw, 0.75rem);
        font-size: clamp(0.75rem, 0.6893rem + 0.2589vw, 1rem);
        color: #fff;
        text-align: center;
        cursor: pointer;
        transition: var(--standard-transition);

        &:hover {
            background-color: var(--orange);
            border-color: var(--orange);
        }
    }

    .city-content {
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        height: 0;
        pointer-events: none;
        opacity: 0;
        transition: var(--standard-transition);
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 16px;

        .error {
            margin-top: 0;
        }
    }

    &.active {
        .city-name {
            background-color: var(--orange);
            border-color: var(--orange);
        }

        &.extended {
            height: 260px;

            .city-content {
                height: 150px;
                pointer-events: auto;
                opacity: 1;
            }
        }
    }
}

/* &-check, &-name → конкатенация невозможна */
.city-flex .area-check {
    aspect-ratio: 1/1;
    position: relative;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 24px;
        aspect-ratio: 1/1;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .3);
        background-color: transparent;
        background-image: none;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        transition: var(--standard-transition);
    }
}

.city-flex .area-name {
    font-size: clamp(0.75rem, 0.7197rem + 0.1294vw, 0.875rem);
    text-align: left;
}

/* &__address → конкатенация невозможна */
.city-flex .area-name__address {
    font-size: 12px;
    line-height: 100%;
    color: rgba(255, 255, 255, .7);
    display: none;
}

.odd-registration-form {
    text-align: left;

    .form_container {
        @media (max-width: 767px) {
            padding: 0 10px;
        }
    }

    .odd-btn {
        font-size: clamp(1.375rem, 1.1475rem + 0.9709vw, 2.3125rem);
		padding: clamp(0.625rem, 0.4733rem + 0.6472vw, 1.25rem) clamp(1rem, 0.7573rem + 3vw, 3.5rem);
    }
}

.phone-group {
    border: none;

    &:hover {
        border: none;
    }

    &:has(input.phone-number:hover) {
        border: none;
    }

    &:has(input.phone-number:focus) {
        border: none;
    }

    .phone-country-selector {
        height: 42px;
    }
}

.form-group_checkbox {
    .form-group {
        padding: 0;
    }
}

/* кастомные радиобаттоны выбора количества сотрудников */
.employees-radio__title {
    text-align: left;
	color: #fff;
}

.employees-radio__options {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 3vw, 48px);
}

.employees-radio__option {
	display: flex;
	align-items: center;
	gap: clamp(4px, .75vw, 12px);
	cursor: pointer;
	color: #fff;
	font-size: clamp(12px, 1vw, 16px);

	/*сам input не скрываем через display:none — иначе теряется доступность с клавиатуры*/
	input[type='radio'] {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
	}
}

.employees-radio__circle {
	flex: 0 0 auto;
	width: clamp(16px, 2.5vw, 24px);
	aspect-ratio: 1/1;
	border-radius: 50%;
	border: 2px solid #fff;
	position: relative;
	transition: var(--standard-transition);

	&:after {
		content: '';
		position: absolute;
		inset: clamp(2px, .3vw, 5px);
		border-radius: 50%;
		background: #fff;
		opacity: 0;
		transform: scale(0.5);
		transition: var(--standard-transition);
	}
}

input[type='radio']:checked + .employees-radio__circle {
	border-color: var(--orange);
    background-color: var(--orange);

	&:after {
		opacity: 1;
		transform: scale(1);
	}
}

input[type='radio']:focus-visible + .employees-radio__circle {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
}