.profile-button {
    position: fixed;
    right: 3vw;
    top: 3vw;
    display: block;
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
    background-image: url("../img/profile_none.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.profile-button.man {
    background-image: url("../img/profile_man.svg");
}

.profile-button.woman {
    background-image: url("../img/profile_woman.svg");
}

.profile {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 96%;
    height: 98%;
    padding: 2%;
    background-color: rgb(255, 255, 255);
    z-index: 100;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.profile .content {
    display: block;
    width: 100%;
    height: auto;
    transition: padding-bottom 0.3s ease;
}

.profile .content.has-save-button {
    padding-bottom: 10vw; /* Высота кнопки сохранить + отступ */
}

.profile .save-button-wrap {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 12vw;
    padding: 1vw;
    box-sizing: border-box;
    align-items: center;
    background: white;
    box-shadow: 0 -0.2vw 1vw rgba(0,0,0,0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
}

.profile .save-button-wrap.visible {
    transform: translateY(0);
}

.profile .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #ffffff7e;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}

.profile .close-button {
    position: fixed;
    top: 3vw;
    right: 3vw;
    width: 7vw;
    height: 7vw;
    cursor: pointer;
    z-index: 9990;
    background-image: url("/img/close.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.profile .popup-content {
    background: white;
    padding: 3vw;
    border-radius: 2vw;
    box-shadow: 0 0.5vw 2vw rgba(0, 0, 0, 0.3);
    width: 70vw;
    text-align: center;
    position: relative;
}

.profile .popup-close {
    position: relative;
    float: right;
    top: 0;
    right: 0;
    width: 7vw;
    height: 7vw;
    margin-left: -7vw;
    cursor: pointer;
    background-image: url("/img/close.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.profile .popup-h3 {
    display: flex;
    font-size: 5vw;
    justify-content: center;
    text-align: center;
    margin: 7vw;
    color: #333;
}

.profile .popup-buttons {
    margin-top: 2vw;
    display: flex;
    gap: 1vw;
    justify-content: center;
}

.profile .button {
    display: flex;
    width: 100%;
    height: auto;
    padding: 1.5vw 3vw;
    font-size: 5vw;
    font-weight: 600;
    text-align: center;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: white;
    background: #007bff;
    border: none;
    border-radius: 1vw;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.1s ease;
}

.profile .button-close {
    background: #6c757d;
}

.profile .content .field-wrap {
    display: block;
    width: auto;
    height: auto;
    border-radius: 2vw;
    background-color: #f1f4f5;
    margin-top: 5vw;
    padding: 1vw 1vw 0 1vw;
}

.profile .content .text {
    display: flex;
    width: auto;
    height: auto;
    font-size: 5vw;
}

.profile .content .text.bold {
    font-weight: bold;
}

.profile .label {
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 1vw;
    font-weight: bold;
    font-size: 4vw;
}

.profile .count {
    position: absolute;
    top: 1vw;
    right: 1vw;
    text-align: center;
    font-weight: normal;
    font-size: 4vw;
}

.profile .content .zodiac {
    display: flex;
    width: 5vw;
    height: 5vw;
    margin: 1vw;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.profile .content .gender {
    display: flex;
    width: 5vw;
    height: 5vw;
    margin: 1vw;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.profile .areainput {
    width: 100%;
    height: 16vw;
    box-sizing: border-box;
    padding: 2vw;
    font-size: 3.2vw;
}

.profile .areainput.big {
    height: 24vw;
}

.profile .textinput {
    width: 100%;
    height: 7vw;
    box-sizing: border-box;
    padding: 1vw;
    font-size: 3.2vw;
}

.profile textarea:focus,
.profile input:focus,
.profile button:focus {
    outline: none;
}

.profile textarea {
    resize: none;
}

.profile .radio-group {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    margin: 1vw;
    font-family: system-ui, sans-serif;
}

.profile .radio-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    align-items: center;
}

.profile .radio-circle {
    display: flex;
    width: 5vw;
    height: 5vw;
    margin-top: 1vw;
    margin-right: 1.2vw;
    position: relative;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('/img/profile_radio_0.svg');
}

.profile .radio-circle.checked {
    background-image: url('/img/profile_radio_1.svg');
}

.profile .radio-label {
    display: flex;
    font-size: 3.9vw;
    color: #333;
    font-weight: 500;
    align-items: center;
}

.profile .radio-item input[type="radio"] {
    position: absolute;
    display: flex;
    opacity: 0;
    width: 0;
    height: 0;
}

.profile .checkbox-group {
    display: flex;
    flex-wrap: wrap; /* 🔥 Перенос на новую строку */
    width: 100%;
    box-sizing: border-box;
    gap: 1vw; /* Отступы между чекбоксами */
}

.profile .checkbox-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    max-width: 50vw;
    min-height: 4vw; /* Минимальная высота для удобства клика */
    /* 🔥 КЛЮЧЕВОЕ: все чекбоксы в строке растягиваются равномерно */
    flex: 1 1 0%; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% — растягиваем на всю доступную ширину строки */
    box-sizing: border-box;
    text-align: left;
    padding-left: 0.9vw;
}

.profile .checkbox-circle {
    width: 5vw;
    height: 5vw;
    margin-right: 1vw;
    flex-shrink: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('/img/profile_check_0.svg');
}

.profile .checkbox-circle.checked {
    background-image: url('/img/profile_check_1.svg');
}

.profile .checkbox-label {
    font-size: 3.9vw;
    color: #333;
    font-weight: 500;
    white-space: normal; /* 🔥 ВСЁ ВИДНО — текст ломается на строки внутри чекбокса! */
    word-wrap: break-word; /* 🔥 Дополнительно: разрешаем перенос внутри ячейки */
    overflow: visible; /* 🔥 Никакого обрезания */
    padding: 0.8vw 1.2vw;
    border-radius: 1.6vw;
    background-color: #f5f5f5;
    flex-grow: 1; /* 🔥 Растягиваем текст на всю оставшуюся ширину чекбокса */
    text-align: left;
    line-height: 1.3;
    box-sizing: border-box;
}

.profile .checkbox-label-field-show {
    font-size: 3.9vw;
    color: #706b6b;
    font-weight: 500;
    overflow: visible;
    padding: 0.8vw 1.2vw;
    text-align: left;
    line-height: 1.3;
    box-sizing: border-box;
    width: auto;
}

.profile .checkbox-label.checked {
    box-shadow: inset 0 0 0 0.3vw #ffbe79;
    background-color: #ffe7cd;
}

.profile .checkbox-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.profile .field-show {
    position: relative;
    width: 50vw;
    display: flex;
    justify-content: left;
    padding: 1vw 1vw 1vw 1.7vw;
}

.profile .toggle-container {
    display: flex;
    align-items: center;
    gap: 1.2vw;
    padding: 2vw 0 2vw 5vw;
}

.profile .toggle-switch {
    position: relative;
    display: inline-block;
    width: 10vw;
    height: 5vw;
}

.profile .toggle-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
}

.profile .toggle-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 3.4vw;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.profile .toggle-label::before {
    content: "";
    position: absolute;
    height: 4vw;
    width: 4vw;
    left: 0.5vw;
    bottom: 0.5vw;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.profile .toggle-checkbox:checked + .toggle-label {
    background-color: #2196F3;
}

.profile .toggle-checkbox:checked + .toggle-label::before {
    transform: translateX(5vw);
}

.profile .toggle-label:hover {
    background-color: #bbb;
}

.profile .toggle-checkbox:checked + .toggle-label:hover {
    background-color: #0d8bf2;
}

.profile .toggle-text {
    font-family: Arial, sans-serif;
    font-size: 4vw;
    color: #333;
    transition: color 0.3s ease;
}

.profile .slider-container {
    display: block;
    width: 100%;
    max-width: 80vw;
    margin: 1vw auto 0.5vw;
    justify-content: center;
    text-align: center;
}

.profile .slider-container label {
    display: block;
    margin-bottom: 0.8vw;
    font-size: 4.5vw;
    font-weight: bold;
    color: #f79227;
}

.profile .slider-container input[type="range"] {
    width: 100%;
    height: 0.8vw;
    border-radius: 0.4vw;
    background: #ddd;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Стиль "заполненной" части слайдера (в разных браузерах) */
.profile .slider-container input[type="range"]::-webkit-slider-runnable-track {
    height: 1.8vw;
    border-radius: 1.4vw;
    background: linear-gradient(to right, #fae3cb 0%, #ffbe79 var(--val), #ddd var(--val), #ddd 100%);
}

.profile .slider-container input[type="range"]::-moz-range-track {
    height: 1.8vw;
    border-radius: 1.4vw;
    background: #ddd;
}

.profile .slider-container input[type="range"]::-moz-range-progress {
    background: #ffbe79;
    height: 1.8vw;
    border-radius: 1.4vw;
}

/* Стиль ползунка (бегунка) */
.profile .slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    background: #ffbe79;
    cursor: pointer;
    box-shadow: 0 0.2vw 0.6vw rgba(0,0,0,0.2);
    margin-top: -0.9vw; /* центрируем по высоте трека */
}

.profile .slider-container input[type="range"]::-moz-range-thumb {
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    background: #ffbe79;
    cursor: pointer;
    border: none;
    box-shadow: 0 0.2vw 0.6vw rgba(0,0,0,0.2);
}

.profile .detect-wrap {
    display: grid;
    grid-template-columns: auto 12vw;
    width: 100%;
    height: 10vw;
    margin-bottom: 3vw;
    justify-self: end;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}

.profile .detect-wrap > * {
    justify-self: end;
}

.profile .city-detected {
    display: flex;
    font-size: 5vw;
    width: 100%;
    height: 100%;
    line-height: 5vw;
    background-color: #ffffff;
    border-radius: 1.5vw;
    padding: 2vw;
    overflow: hidden;
    box-sizing: border-box;
}

.profile .city-detected.disable {
    display: flex;
    color: #8d959b;
}

.profile .refresh-button {
    display: flex;
    width: 10vw;
    height: 10vw;
    background-color: #007bff;
    border-radius: 1.5vw;
    background-image: url("../img/refresh.svg");
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
}

.profile .autocomplete-container {
    position: relative;
        width: 100%;
        min-height: 10vw;
        transition: height 0.3s ease-in-out;
        overflow: visible;
}

.profile .collapse {
    overflow: hidden;
    height: 0;
    padding: 0;
    border: none;
}

.profile .city-input {
    width: 100%;
    padding: 2vw;
    font-size: 4.5vw;
    border: 0.1vw solid #ccc;
    border-radius: 1.5vw;
    box-sizing: border-box;
}

.profile .city-input.warning {
    border-color: red;
}

.profile .city-input.blink {
  animation: blink-border 0.5s infinite;
}

.profile .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: white;
    border: 0.1vw solid #ccc;
    border-top: none;
    max-height: 50vw;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 0.2vw 0.6vw rgba(0,0,0,0.1);
    display: none; /* изначально скрыт */
}

.profile .dropdown-list strong {
    font-weight: bold;
    color: #007bff;
}

.profile .dropdown-list li {
    padding: 1vw 1.2vw;
    cursor: pointer;
    border-bottom: 0.1vw solid #f0f0f0;
    font-size: 4.5vw;
}

.profile .dropdown-list li:hover {
    background-color: #f5f5f5;
}

.profile .dropdown-list li:last-child {
    border-bottom: none;
}

.location-filter-warning {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff9c4;
    color: #5d4037;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    max-width: 90%;
    text-align: center;
    line-height: 1.4;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.location-filter-warning.fade-out {
    opacity: 0;
}

.location-filter-warning-inline {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #fff9c4;
    color: #5d4037;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.location-filter-warning-inline a {
    color: #1e88e5;
    text-decoration: underline;
    margin-left: 6px;
}

.profile-location-warning-container {
    margin: -3vw 1vw 0 1vw;
    padding: 10px 12px;
    background: #fff9c4;
    color: #5d4037;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
}

.profile-location-warning-container a {
    color: #1e88e5;
    text-decoration: underline;
    margin-left: 6px;
}

.profile-location-warning-container:empty {
    display: none;
}

.profile-location-warning {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #fff9c4;
    color: #5d4037;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.profile-location-warning a {
    color: #1e88e5;
    text-decoration: underline;
    margin-left: 6px;
}