body #chatList {
    padding-top: 0px;
    }
    body #response {
    padding: 20px;
    height: calc(100vh - 96px);
    position: relative;
    top: 46px;
    overflow-x: hidden;
    overflow-y: auto;
}
 body .cart-icon {
    position: absolute;
    top: 13px;
    right: 6px;
    cursor: pointer;
    z-index: 1000;}
    @media (min-width:980px) {
        .tyuuuy {
    font-size: 13px!important;
    width: 156px!important;
    margin-top: 1px!important;
    display: block;
    overflow-y: hidden;
    height: 17px;
}
        /* Фиксированная ширина первой колонки */
#response th:nth-child(2), #response td:nth-child(2) {
    padding-left: 8px;
    text-align: left;
    width: 350px; /* Фиксированная ширина */
}
#response th:nth-child(2) {
    text-align: center;
}
    }
    #requestPermissionButton {
margin-top: 2px;
    padding: 4px;
    background-color: #484848;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    bottom: 8px;
    right: 33px;
    display: block;
    float: right;
    }
    body .logo img {
 top: 8px;
    right: -11px;
    z-index: 10;
            }
            #gag {
                display:none;
            }
            #gag1 {
                display:none;
            }
             #chatToggle1 {
                    display:none;
}

/* Стили для выезжающей панели с чатами */
#chatSidebar {
    left: 0px;
}

/* Кнопка для открытия панели */
#chatToggle {
    margin-left:250px;
}

.logo1 {
    display:none;
}
            @media (max-width:980px) {
                    body #searchUser {
        font-size: 16px;
        /* margin: 2% 2%; */
        width: 92vw;
        margin: 0vw 4vw;
        padding: 5px;
        margin-top: 7px;
                    }
                .logo1 {
    display: block;
}
                     .logo1 img {
        position: fixed;
        top: 0px;
        left: 50%;
        z-index: 9;
        height: 40px;
        margin-left: -22px;
    }
               html body .logo img {
    top: 8px;
    left: 13px !important;
    z-index: 10;
    right: auto !important;
    margin: 0 auto !important;
    display: none;
}
                    html body .dsa {
        top: 11px !important;
        color: #999 !important;
        position: fixed !important;
        padding: 3px 12px;
        font-size: 0px;
    }
     html body button.dsa {
    margin-left: 33px!important;
            }
                body #settingsModal {
    display: none;
    position: fixed;
    z-index: 9999 !important;
    top: 0px;
    left: 0px;
    transform: none;
    background: #2e2e2e;
    padding: 20px;
    border: 0px solid rgb(88, 87, 87);
    z-index: 1000;
    border-radius: 0px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 400px;
    height: 100vh;
    overflow-y: auto;}
                #gag {
                display:block;
            }
            
               body #chatToggle {
            top: calc(100vh - 46px);
    display:none;
                }
               body #chatSidebar {
    
    height: calc(100vh - 79px);
    width: 0px;
    top: 40px;
}
                #chatToggle1 {
                    display:block;
    position: fixed;
    bottom: 20px;
    left: 10px;
    z-index: 976;
}
#chatList li a {
    font-size: 21px!important;
}
            }
            #chatList li a {
    border: none;
    height: 55px;
    font-size: 15px;
    text-decoration: unset;
    border-radius: 10px;
    padding: 4px;
    cursor: pointer;
    margin-left: 0px;
    width: 100%;
    display: block;
    text-align: left;
    padding-left: 57px;
}
 #chatList li a {
    word-break: break-all;
}

/* На мобильных экранах ширина панели занимает всю ширину */
@media (max-width: 980px) {
html body #chatSidebar {
width: 100vw;
left:-100vw;
}
#chatSidebar.open {
left: -100vw;
}
}
.category-grid {
display: grid;
gap: 15px;
grid-template-columns: repeat(4, 1fr); /* 4 колонки по ширине */
padding: 20px;
margin-top: 28px;
}
#becomeExecutorBtn {
margin-top: -7px;
    padding: 4px;background: linear-gradient(45deg, #ffc300, #e78e20);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    float: left;
}

#becomeExecutorBtn:hover {
background: linear-gradient(45deg, #edb532, #a6cb11); 
}

#becomeExecutorBtn:active {
background: linear-gradient(45deg, #edb532, #a6cb11);
}

#becomeExecutorBtn:focus {
outline: 2px solid #2575fc;
outline-offset: 2px;
}
/* Стили для кнопок категорий вместо ссылок */
.category-grid button.category-btn {
position: relative;
width: 100%;
padding-top: 100%; /* квадратный блок */
border-radius: 12px;
overflow: hidden;
border: none;
cursor: pointer;
color: white;
font-size: 1.1rem;
font-weight: 600;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
background-size: cover;
background-position: center;
transition: box-shadow 0.3s ease, transform 0.2s ease;
display: block;
text-align: center;
user-select: none;
}

/* Ховер эффект */
.category-grid button.category-btn:hover,
.category-grid button.category-btn:focus {
box-shadow: 0 8px 16px rgba(0,0,0,0.4);
outline: none;
transform: scale(1.03);
}

/* Текст названия категории */
.category-grid button.category-btn .category-name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
padding: 10px 15px;
font-size: 1.1rem;
font-weight: 600;
box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
user-select: none;
pointer-events: none; /* Чтобы клики проходили на кнопку, а не текст */
}

/* Адаптив для мобильных: 2 колонки */
@media (max-width: 768px) {
.category-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 12px;
}
.category-grid button.category-btn .category-name {
font-size: 1rem;
padding: 8px 10px;
}
}
@media (max-width: 768px) {
.category-grid button.category-btn .category-name {
font-size: 1rem;
padding: 8px 10px;
}
}
.category-grid button.category-btn .category-name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px 15px;
font-size: 1.1rem;
font-weight: 600;
color: white;
user-select: none;
pointer-events: none;

/* Градиентный фон от чёрного к прозрачному */
background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));

/* Тень для текста дополнительно */
text-shadow: 0 0 5px rgba(0,0,0,0.8);
}
.category-grid button.category-btn {
position: relative;
width: 100%;
padding-top: 100%; /* квадрат */
border-radius: 12px;
overflow: hidden;
border: none;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
background-size: cover;
background-position: center;
transition: box-shadow 0.3s ease, transform 0.2s ease;
color: white;
font-weight: 600;
display: block;
user-select: none;
}

.category-grid button.category-btn:hover,
.category-grid button.category-btn:focus {
box-shadow: 0 8px 16px rgba(0,0,0,0.4);
outline: none;
transform: scale(1.03);
}

/* Градиентное затемнение (оверлей) поверх картинки, перед текстом */
.category-grid button.category-btn::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50%; /* или можно 40-60% */
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) -11%, rgba(0, 0, 0, 0) 29%);
pointer-events: none;
border-radius: 0 0 12px 12px;
}

/* Стили для текста в span */
.category-grid button.category-btn span {
position: absolute;
bottom: 10px;
left: 15px;
right: 15px;
font-size: 1.1rem;
z-index: 1;
text-shadow: 0 0 5px rgba(0,0,0,0.8);
pointer-events: none;
user-select: none;
}

/* Адаптив */
@media (max-width: 768px) {
.category-grid button.category-btn span {
font-size: 1rem;
bottom: 8px;
left: 10px;
right: 10px;
}
}

#sectionMenu {
    display: flex
;
    position: fixed;
    z-index: 90;
    width: 100%;
    left: 0px;
    top: 46px;
    background-color: #fff;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding: 0 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

#sectionMenu::-webkit-scrollbar {
height: 6px;
}

#sectionMenu::-webkit-scrollbar-thumb {
background-color: #dfdfdf;
border-radius: 3px;
}

.section-btn {
cursor: pointer;
padding: 10px 18px;
border: 1.5px solid #dfdfdf;
border-radius: 6px;
white-space: nowrap;
background-color: #fafafa;
color: #8b8b8b;
font-size: 1rem;
font-weight: 600;
transition:
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
user-select: none;
}

.section-btn:hover,
.section-btn:focus {
background-color: #e0e0e0;
outline: none;
}

.section-btn.active {
    background-color: #9abe36;
    color: #fff;
    border-color: #80993b;
    box-shadow: 0 0 8px rgb(201 201 201);
}

/* Чтобы кнопка "Все" при активе выглядела так же, используйте active класс */
/* Ниже пример, если нужно отдельный стиль для кнопки "Все" можно добавить */

@media (max-width: 768px) {
#sectionMenu {
gap: 10px;
padding: 0 8px;
}

.section-btn {
padding: 14px 20px;
font-size: 1.1rem;
border-radius: 8px;
flex-shrink: 0; /* Сохраняем ширину кнопок для скролла */
}
}



#executorApplicationForm {
max-width: 600px;
margin: 20px auto 40px auto;
padding: 25px 30px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333;
animation: fadeIn 0.8s ease forwards;
}

/* Анимация плавного появления */
@keyframes fadeIn {
from {opacity: 0; transform: translateY(10px);}
to {opacity: 1; transform: translateY(0);}
}

/* Заголовок */
#executorApplicationForm h2 {
font-size: 1.8rem;
margin-bottom: 20px;
font-weight: 700;
color: #3a3a3a;
text-align: center;
}

/* Строки с полями */
#executorApplicationForm .field-row {
margin-bottom: 18px;
display: flex;
flex-direction: column;
}

/* Метки */
#executorApplicationForm label {
margin-bottom: 6px;
font-weight: 600;
font-size: 1rem;
color: #444;
}

/* Текстовые поля и textarea, select */
#executorApplicationForm input[type="text"],
#executorApplicationForm input[type="number"],
#executorApplicationForm input[type="password"],
#executorApplicationForm textarea,
#executorApplicationForm select,
#executorApplicationForm input[type="file"] {
padding: 10px 14px;
border: 1.8px solid #ccc;
border-radius: 10px;
font-size: 1rem;
transition: border-color 0.3s ease;
font-family: inherit;
resize: vertical;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.07);
}

#executorApplicationForm input[type="text"]:focus,
#executorApplicationForm input[type="number"]:focus,
#executorApplicationForm textarea:focus,
#executorApplicationForm select:focus,
#executorApplicationForm input[type="file"]:focus {
border-color: #9abe36;
outline: none;
box-shadow: 0 0 8px rgba(154, 190, 54, 0.6);
}

/* Текстовые поля textarea высота */
#executorApplicationForm textarea {
min-height: 80px;
}

/* Кнопки - берём стили, похожие на #becomeExecutorBtn, но чуть расширенные */
#executorApplicationForm .btn {
margin-top: 15px;
padding: 14px 26px;
background: linear-gradient(45deg, #ffc300, #e78e20);
color: white;
font-weight: 700;
font-size: 1.1rem;
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(231, 142, 32, 0.7);
transition: background 0.3s ease, transform 0.2s ease;
display: inline-block;
user-select: none;
text-align: center;
width: 100%;
}

#executorApplicationForm .btn:hover {
background: linear-gradient(45deg, #edb532, #a6cb11);
box-shadow: 0 6px 16px rgba(166, 203, 17, 0.8);
transform: scale(1.05);
}

#executorApplicationForm .btn:active {
background: linear-gradient(45deg, #a6cb11, #80993b);
box-shadow: 0 3px 8px rgba(128, 153, 59, 0.9);
transform: scale(0.98);
}

#executorApplicationForm .btn.btn-secondary {
background: #e0e0e0;
color: #555;
box-shadow: none;
margin-top: 10px;
}

#executorApplicationForm .btn.btn-secondary:hover {
background: #cacaca;
}

/* Адаптив для мобильных */
@media (max-width: 480px) {
#executorApplicationForm {
padding: 18px 20px;
margin: 10px;
}
}
#response h2 {
    text-align: center;
}
#applicationMessage {
    text-align: center;
    margin-top: 22px;
}

.new-request-app-container {
display: flex;
gap: 20px;
height: calc(100vh - 100px);
padding: 20px;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f5f7fa;
}

.form-container {
width: 30%;
overflow-y: auto;padding: 20px;
box-sizing: border-box;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
position: relative;
}

.form-container h2 {
margin-top: 0;
font-weight: 700;
color: #3a3a3a;
margin-bottom: 20px;
}

.field-row {
margin-bottom: 16px;
display: flex;
flex-direction: column;
}

.field-row label {
font-weight: 600;
margin-bottom: 6px;
color: #3a3a3a;
}

.field-row input[type="text"],
.field-row input[type="number"],
.field-row input[type="password"],
.field-row textarea,
.field-row select,
.field-row input[type="file"],
#applicationForm input[type="radio"] {
padding: 8px 12px;
border-radius: 8px;
border: 1.8px solid #ccc;
font-size: 1rem;
outline-offset: 2px;
transition: border-color 0.3s ease;
font-family: inherit;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.07);
resize: vertical;
}

.field-row textarea {
min-height: 80px;
}

.field-row input[type="text"]:focus,
.field-row input[type="number"]:focus,
.field-row textarea:focus,
.field-row select:focus {
border-color: #9abe36;
box-shadow: 0 0 8px rgba(154,190,54,0.6);
}

button[type="submit"], button#cancelBtn {
display: block;
width: 100%;
margin-top: 10px;
padding: 14px;
background: linear-gradient(45deg, #ffc300, #e78e20);
color: white;
font-weight: 700;
font-size: 1.1rem;
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(231,142,32,0.7);
transition: background 0.3s ease, transform 0.2s ease;
user-select: none;
}

button[type="submit"]:hover, button[type="submit"]:focus,
button#cancelBtn:hover, button#cancelBtn:focus {
background: linear-gradient(45deg, #edb532, #a6cb11);
box-shadow: 0 6px 16px rgba(166,203,17,0.8);
transform: scale(1.05);
}

button[type="submit"]:active, button#cancelBtn:active {
background: linear-gradient(45deg, #a6cb11, #80993b);
box-shadow: 0 3px 8px rgba(128,153,59,0.9);
transform: scale(0.98);
outline: none;
}

#cancelBtn {
background: #e0e0e0;
color: #555;
box-shadow: none;
margin-top: 10px;
}

#cancelBtn:hover, #cancelBtn:focus {
background: #cacaca;
}

.map-container {
width: 70%;
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
background: #fff;
display: flex;
flex-direction: column;
height: 100%;
}

.map-address-wrapper {
position: absolute;
top: 15px;
left: 15px;
right: 15px;
z-index: 1000;
}

.map-address-wrapper input {
width: 100%;
padding: 10px 15px;
font-size: 1.1rem;
border-radius: 8px;
border: 1.8px solid #ccc;
box-shadow: 0 1px 4px rgba(0,0,0,0.12);
outline-offset: 2px;
font-family: inherit;
}

.map-address-wrapper input:focus {
border-color: #9abe36;
box-shadow: 0 0 8px rgba(154,190,54,0.6);
}

.location-map {
flex: 1;
margin-top: 58px;
border-radius: 0 0 12px 12px;
}

.form-container::-webkit-scrollbar {
width: 8px;
}
.form-container::-webkit-scrollbar-track {
background: #f0f0f0;
}
.form-container::-webkit-scrollbar-thumb {
background-color: #9abe36;
border-radius: 10px;
}

/* Мобильная версия */
@media (max-width: 768px) {
.new-request-app-container {
flex-direction: column;
height: auto;
padding: 12px 10px;
}
.form-container {
width: 100% !important;
height: auto !important;
box-shadow: none;
background: none;
padding: 0;
order: 2;
max-height: 60vh;
overflow-y: auto;
border-radius: 0;
}
.map-container {
width: 100% !important;
height: 50vh;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9998;
border-radius: 0;
overflow: hidden;
background: #fff;
}
.map-address-wrapper {
position: relative;
top: auto;
left: auto;
right: auto;
z-index: 9999;
padding: 8px 10px;
background: rgba(255 255 255 / 0.85);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.map-address-wrapper input {
font-size: 1rem;
border-radius: 6px;
border: 1.5px solid #ccc;
padding: 8px 12px;
}
.location-map {
flex: none;
height: calc(100% - 48px);
margin-top: 0;
}

.form-container {
position: relative;
background: #fff;
border-radius: 12px 12px 0 0;
box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
}

body.with-fixed-map .map-container {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50vh;
}

body.map-scrolled-up .map-container {
height: 20vh;
transition: height 0.3s ease;
}

body.map-scrolled-down .map-container {
height: 50vh;
transition: height 0.3s ease;
}
}
@media (max-width: 768px) {
.new-request-app-container {
display: block;
padding: 0;
height: 100vh;
overflow: hidden;
}

.map-container {
        position: fixed;
        top: 41px;
        left: 0;
        right: 0;
        height: 60vh;
background: #fff;
z-index: 10000;
box-shadow: 0 2px 12px rgba(0,0,0,0.12);
border-radius: 0 0 12px 12px;
transition: height 0.3s ease;
overflow: hidden;
display: flex;
flex-direction: column;
}

body.map-scrolled-down .map-container {
height: 20vh !important;
}
body.map-scrolled-up .map-container {
height: 50vh !important;
}

.map-address-wrapper {
position: relative;
padding: 8px 12px;
background: rgba(255 255 255 / 0.95);
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
z-index: 11000;
font-size: 1rem;
border-bottom: 1px solid #ccc;
}

.map-address-wrapper input {
width: 100%;
padding: 8px 12px;
border-radius: 8px;
border: 1.5px solid #ccc;
font-size: 1rem;
}

.location-map {
flex: 1 1 auto;
border-radius: 0 0 12px 12px;
}
.form-container h2 {
    display:none;
}
.form-container {
position: absolute;
        top: 62vh;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-radius: 12px 12px 0 0;
overflow-y: auto;
box-shadow: 0 -6px 15px rgba(0,0,0,0.1);
transition: top 0.3s ease;
padding: 20px;
-webkit-overflow-scrolling: touch;
}

body.map-scrolled-up .form-container {
top: 50vh !important;
}
}
@media (max-width:980px) {
    #sectionMenu {
margin-top: -5px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Автоадаптивное число колонок с шириной от 140px */
gap: 8px; /* Отступы между кнопками */
}
#sectionMenu {
    padding-bottom: 6px;
    margin-top: -5px;
}
#sectionMenu {
grid-template-columns: repeat(2, 1fr) !important;
gap: 6px !important;
}
    .category-grid {
        margin-top: -20px;
    }


/* Сами кнопки — немного адаптируем под сетку */
#sectionMenu .section-btn {
width: 100%; /* Кнопка растягивается под размер колонки */
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 8px 12px;
font-size: 15px;
border-radius: 5px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}

#sectionMenu .section-btn:hover,
#sectionMenu .section-btn.active {
}

    .form-container {
        position: fixed;
        top: 55vh;
        
        z-index: 99999;
    }
        html button#settingsButton {
            margin-left:0px!important;
            right:auto!important;
}
}
    body #settingsModal {
        background: #ffffff;
    }
    @media (max-width:980px) {
        body #response {
        height: calc(100vh - 49px) !important;
        }
        #becomeExecutorBtn {
    margin-top: -5px;
    margin-left: 50px;
        }
        }
        
        @media (max-width: 980px) {
    html body #response {
        padding-bottom: 0px !important;
    }
}