:root {
    --form-popup-overlay-background: rgba(69, 69, 78, 0.8);
    --form-popup-z-index: 99999;
    --form-popup-position: 0;

    --form-popup-width: 90%;
    --form-popup-max-width: 428px;
    --form-popup-max-height: 80%;
    --form-popup-margin: var(--page-block-vertical-padding) auto;
    --form-popup-close-size: 38px;
    --form-popup-close-scale: 1.1;
    --form-popup-title-margin: 0 0 var(--page-vertical-padding);
    --form-popup-title-descr-margin: 0 0 calc(2 * var(--page-vertical-padding));

    --scroll-thumb: var(--accient-color);    /* тёмно-синий — заменяй на точный HEX */
    --scroll-track: var(--background-color);    /* светлый трек */
    --scroll-width: 12px;

    --form-popup-checkbox-width: 28px;
    --form-popup-checkbox-height: 12px;
    --form-popup-checkbox-checked-icon: url("/static/svg/nav/done.3ffffda21100.svg");
    --form-popup-checkbox-checked-background-size: 8px 8px;
    --form-popup-checkbox-margin-end: 5px;
}

.form_popUp_overlay {
    background-color: var(--form-popup-overlay-background);
    z-index: var(--form-popup-z-index);
    bottom: var(--form-popup-position);
    right: var(--form-popup-position);
    left: var(--form-popup-position);
    top: var(--form-popup-position);
    align-items: center;
    position: fixed;
    display: none;
    height: 100%;
    width: 100%;
    margin: 0;
}

.form_popUp_overlay.show {
    display: flex;
}

.form_popUp_overlay > .form_popUp {
    background-color: var(--background-color);
    max-height: var(--form-popup-max-height);
    max-width: var(--form-popup-max-width);
    padding: var(--page-vertical-padding);
    margin: var(--form-popup-margin);
    width: var(--form-popup-width);
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
    flex-wrap: nowrap;
    display: flex;
}

.form_popUp_overlay > .form_popUp > .form_popUp_close {
    background-color: var(--accient-color);
    height: var(--form-popup-close-size);
    width: var(--form-popup-close-size);
    right: var(--form-popup-position);
    top: var(--form-popup-position);
    justify-content: center;
    box-sizing: border-box;
    align-items: center;
    position: absolute;
    cursor: pointer;
    display: flex;
}

.form_popUp_overlay > .form_popUp > .form_popUp_close > .form_popUp_close_icon {
    transition: var(--nav-transition);
}

.form_popUp_overlay > .form_popUp > .form_popUp_close:hover > .form_popUp_close_icon {
    scale: var(--form-popup-close-scale);
}

.form_popUp_overlay > .form_popUp > .form_popUp__title {
    font-weight: var(--header-text-font-weight);
    line-height: var(--header-text-line-height);
    font-size: var(--header-text-font-size);
    margin: var(--form-popup-title-margin);
    letter-spacing: var(--letter-spacing);
    color: var(--text-main-color);
    text-transform: uppercase;
}

.form_popUp_overlay > .form_popUp > .form_popUp__title_descr {
    margin: var(--form-popup-title-descr-margin);
    font-weight: var(--usual-text-font-weight);
    line-height: var(--usual-text-line-height);
    font-size: var(--usual-text-font-size);
    letter-spacing: var(--letter-spacing);
    color: var(--text-main-color);
}

.form_popUp_overlay > .form_popUp > .form_popUp__form {
    padding-inline-end: calc(var(--scroll-width));
    background-color: var(--background-color);
    scrollbar-gutter: stable both-edges;
    flex-direction: column;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
}

/* ===== WebKit (Chrome, Edge, Safari) ===== */
.form_popUp_overlay > .form_popUp > .form_popUp__form::-webkit-scrollbar {
    height: var(--scroll-width);
    width: var(--scroll-width);
}

.form_popUp_overlay > .form_popUp > .form_popUp__form::-webkit-scrollbar-track {
    background: var(--scroll-track);
    border-radius: 0; /* острые углы у трека */
}

.form_popUp_overlay > .form_popUp > .form_popUp__form::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb);
    border-radius: 0!important;   /* острые углы у ползунка */
    min-height: 24px;
    border: 0;          /* без внешних отступов */
}

/* hover — можно убрать или настроить */
.form_popUp_overlay > .form_popUp > .form_popUp__form::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--scroll-thumb) 85%, black 15%);
}

/* ===== Firefox ===== */
/* Firefox использует другие свойства — задаём тон/цвет */
.form_popUp_overlay > .form_popUp > .form_popUp__form {
    scrollbar-width: thin; /* 'auto' | 'thin' | 'none' */
    scrollbar-color: var(--scroll-thumb) var(--scroll-track); /* thumb then track */
}

.form_popUp_overlay > .form_popUp > .form_popUp__form > label > .text_input {
    padding: calc(var(--page-vertical-padding) / 4);
    margin: 0 0 calc(var(--page-vertical-padding) / 2);
    font-weight: var(--usual-text-font-weight);
    line-height: var(--usual-text-line-height);
    font-size: var(--usual-text-font-size);
    letter-spacing: var(--letter-spacing);
    color: var(--text-main-color);
    border: var(--nav-border);
    text-transform: uppercase;
    box-sizing: border-box;
    outline: none;
    width: 100%;
}

.form_popUp_overlay > .form_popUp > .form_popUp__form > label.file_input {
    margin: 0 0 calc(var(--page-block-vertical-padding) / 2);
    padding: calc(var(--page-vertical-padding) / 4);
    font-weight: var(--usual-text-font-weight);
    line-height: var(--usual-text-line-height);
    font-size: var(--usual-text-font-size);
    color: var(--accient-block-text-color);
    background-color: var(--accient-color);
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
    justify-content: center;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    display: flex;
    outline: none;
}

.form_popUp_overlay > .form_popUp > .form_popUp__form > .files_names {
    margin: 0 0 calc(var(--page-vertical-padding) / 2);
    font-weight: var(--usual-text-font-weight);
    line-height: var(--usual-text-line-height);
    font-size: var(--usual-text-font-size);
    letter-spacing: var(--letter-spacing);
    white-space: break-spaces;
}

.form_popUp_overlay > .form_popUp > .form_popUp__form > label.file_input:hover {
    cursor: pointer;
}

.form_popUp_overlay > .form_popUp > .form_popUp__form > .form_popUp_checkbox_block {
    margin-bottom: var(--page-vertical-padding);
    justify-content: start;
    flex-direction: row;
    align-items: start;
    display: flex;
}

.form_popUp_overlay > .form_popUp > .form_popUp__form > .form_popUp_checkbox_block > .form_popUp_checkbox {
    margin-inline-end: var(--form-popup-checkbox-margin-end);
    height: var(--form-popup-checkbox-height);
    width: var(--form-popup-checkbox-width);
    accent-color: var(--main-color);
    border: var(--nav-border);
    margin-inline-start: 0;
    border-radius: 0;
    appearance: none;
    cursor: pointer;
}

.form_popUp_overlay > .form_popUp > .form_popUp__form > .form_popUp_checkbox_block > .form_popUp_checkbox:checked {
    background-size: var(--form-popup-checkbox-checked-background-size);
    background-image: var(--form-popup-checkbox-checked-icon);
    background-color: var(--main-color);
    border-color: var(--main-color);
    background-repeat: no-repeat;
    background-position: center;
}

.form_popUp_overlay > .form_popUp > .form_popUp__form > .form_popUp_checkbox_block > .form_popUp_checkbox_content {
    font-weight: var(--usual-text-font-weight);
    line-height: var(--usual-text-line-height);
    font-size: 12px;
    letter-spacing: var(--letter-spacing);
    color: var(--text-main-color);
}

.form_popUp_overlay > .form_popUp > .form_popUp__form > .form_popUp_checkbox_block > .form_popUp_checkbox_content > .form_popUp_checkbox_content_link {
    font-weight: var(--header-text-font-weight);
    color: var(--text-main-color);
    text-decoration: none;
}

.form_popUp_overlay > .form_popUp > .form_popUp__form > .form_popUp_checkbox_block > .form_popUp_checkbox_content > .form_popUp_checkbox_content_link:hover {
    text-decoration: underline;
}

.form_popUp_overlay > .form_popUp > .form_popUp__form > .form_popUp__submit,
.form_popUp_overlay.show > .form_popUp > .form_popUp__submit {
    padding: calc(var(--page-vertical-padding) / 4);
    font-weight: var(--usual-text-font-weight);
    line-height: var(--usual-text-line-height);
    font-size: var(--usual-text-font-size);
    background-color: var(--accient-color);
    color: var(--accient-block-text-color);
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
    justify-content: center;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    display: flex;
    outline: none;
    border: none;
}

.form_popUp_overlay > .form_popUp > .form_popUp__form > .form_popUp__submit:hover,
.form_popUp_overlay.show > .form_popUp > .form_popUp__submit:hover {
    cursor: pointer;
}