.form__section {
    padding-block: var(--l) var(--xxxl);
    display: grid;
    gap: var(--xl);
    position: relative;
}

.form__section:nth-child(even)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: calc(100% + (var(--xs) * 2));
    background-color: var(--color-alternate-background);
    border-top: 0.01rem dashed var(--color-input-border);
    border-bottom: 0.01rem dashed var(--color-input-border);
    z-index: 0;
}

.form__subtitle,
.form__group-wrapper {
    z-index: 1;
}

.form__group-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--xl) var(--m);
}

.form__group {
    flex-basis: 48%;
}

.form__group:has(.captcha) {
    flex-basis: 100%;
}

.form__field {
    border: 0.06rem solid var(--color-input-border);
    background-color: var(--color-input-background);
    border-radius: var(--radius-s);
    height: 2.3rem;
    padding-inline: var(--xxs);
    color: var(--color-text-body);
}

.form__field:focus {
    outline: 0.06rem solid var(--color-input-border-focus);
}

.form__label {
    display: flex;
    flex-direction: column;
    gap: var(--xxs);
}

.form__label-name {
    opacity: 0.77;
    font-size: var(--font-s);
    font-weight: var(--light);
}

.form__buttons {
    padding-block: var(--xl) var(--s);
    display: flex;
    gap: var(--s);
}

.form__button {
    justify-self: flex-start;
}

/* dropdown */
.form__dropdown {
    width: 100%;
    padding-right: 1.5rem;
}

.form__custom-dropdown {
    position: relative;
}

.form__dropdown-arrow {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    color: var(--night);
    opacity: 0.68;
    pointer-events: none;
}

.form__option {
    color: var(--night);
    font-weight: 500;
}

/* date */
.form__date{
    width: auto;
}

.form__date::-webkit-calendar-picker-indicator {
    opacity: 0.6;
    filter: invert(1);
    cursor: pointer;
    transition: 0.3s ease-out all;
}

.form__date::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}


body[data-theme="light"] .form__date::-webkit-calendar-picker-indicator {
    filter: none;
}

/* checkbox */
.form__label:has(.form__checkbox) {
    flex-direction: row;
    align-items: center;
}

/* captcha */
.captcha {
    display: flex;
    gap: var(--xs);
    width: 48%;
}

.captcha__image {
    height: 2.3rem;
    object-fit: cover;
    object-position: center;
    align-self: flex-start;
    filter: blur(1.3px);
}

.captcha__field {
    width: 100%;
}


/* media query */
@media (max-width: 640px) {
    .form__group {
        flex-basis: 100% !important;
    }

    .captcha {
        flex-direction: column;
        width: 100%;
    }
}

@media (max-width: 560px) {
    .form__subtitle {
        font-size: var(--font-m);
    }
}

@media (max-width:  320px) {
    .form__field {
        width: 100%;
    }
}