/* ========================================
   MOBILE.CSS - Адаптация на основе реальной структуры
   ======================================== */

@media (max-width: 768px) {
    
    /* === БАЗОВЫЕ НАСТРОЙКИ === */
    body {
        overflow-x: hidden;
    }
    
    /* === НАВБАР === */
    #header .container-fluid {
        padding: 10px 15px;
    }
    
    #logo {
        max-height: 40px;
    }
    
    #nav-toggler-div {
        gap: 5px;
    }
    
    #nav-chat-toggler,
    #wanna-try {
        padding: 8px 12px;
        font-size: 14px;
    }
    
    /* === МОДАЛЬНОЕ ОКНО === */
    .modal-overlay {
        padding: 20px;
        align-items: center;
        overflow-y: auto;
    }
    
    .modal-content {
        max-width: 100%;
        width: 100%;
        margin: 0;
        border-radius: 20px;
        max-height: 90vh;
        overflow: auto;
    }
    
    .modal-inner {
        flex-direction: column;
    }
    
    .modal-image {
        display: none !important;
    }
    
    .modal-form-container {
        width: 100%;
        padding: 30px 20px;
    }
    
    .modal-text {
        margin-bottom: 25px;
    }
    
    .modal-title {
        font-size: 24px !important;
        line-height: 28px !important;
    }
    
    .modal-subtitle {
        font-size: 14px !important;
        line-height: 20px !important;
    }
    
    .modal-form-field input,
    .modal-form-field select {
        width: 100%;
        padding: 14px;
        font-size: 16px !important;
        margin-bottom: 12px;
    }
    
    .modal-submit {
        width: 100%;
        padding: 16px;
        font-size: 16px;
    }
    
    .modal-close {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    
    /* === ЧАТ === */
    .chat-button-container {
        right: 15px;
        bottom: 15px;
    }
    
    .widget-button {
        width: 55px;
        height: 55px;
    }
    
    .chat-window {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        right: 0;
        bottom: 0;
        border-radius: 0;
    }
    
    /* === РАЗМЕР ТЕКСТА В ЧАТЕ === */
    .message-content {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    
    #chatInput {
        font-size: 16px !important;
    }
    
    #chatInput::placeholder {
        font-size: 16px !important;
    }
    
    #chatForm input,
    #chatForm select,
    #chatForm button {
        font-size: 16px !important;
    }
    
    #formSuccessMessage {
        font-size: 16px !important;
    }
    
    .chat-body {
        font-size: 16px !important;
    }
    
    /* === CONTAINER 1 (Hero секция) === */
    #container-1 {
        flex-direction: column;
        padding: 20px 15px;
    }
    
    #container-1-block-1 {
        min-width: 100%;
        max-width: 100%;
        min-height: auto;
        max-height: none;
        padding: 30px 20px;
        margin-right: 0;
        margin-bottom: 15px;
    }
    
    #container-1-block-1 span {
        font-size: 36px;
        line-height: 38px;
    }
    
    #container-1-block-1 > div[data-stagger] {
        flex-direction: column;
        padding: 15px;
    }
    
    #container-1-block-1 > div[data-stagger] > div {
        margin: 10px 0;
        max-width: 100%;
    }
    
    #container-1-block-1 img[src*="Drobe"] {
        display: none;
    }
    
    #container-1-block-2 > div {
        min-width: 100%;
        max-width: 100%;
        min-height: auto;
        max-height: none;
    }
    
    #container-1-block-2 img {
        width: 100%;
        height: auto;
    }
    
    #button-work-1 {
        min-width: 100%;
        max-width: 100%;
        min-height: auto;
        padding: 20px;
    }
    
    /* === CONTAINER 2 (О нас) === */
    #container-2 {
        padding: 20px 15px;
    }
    
    #about-button {
        margin-right: 0;
        margin-bottom: 30px;
    }
    
    #container-2-header span {
        font-size: 32px;
        line-height: 34px;
        text-align: center;
        margin-bottom: 30px;
    }
    
    #container-2-blocks-sorter {
        flex-direction: column;
    }
    
    #container-2-block-1,
    #container-2-block-2,
    #container-2-block-3 {
        width: 100%;
        margin: 0 0 15px 0;
    }
    
    #container-2-block-1 {
        height: auto;
        padding: 30px 20px;
    }
    
    #container-2-block-2 > div,
    #container-2-block-3 > div {
        width: 100%;
        height: auto;
        margin: 0 0 15px 0;
    }
    
    /* === CONTAINER 3 (Что делать) === */
    #todo-button {
        margin-right: 0;
    }
    
    #container-3-header span {
        font-size: 32px;
        line-height: 34px;
        margin-right: 0;
    }
    
    #container-3-blocks-sorter {
        flex-direction: column;
    }
    
    #container-3-block-1,
    #container-3-block-2 {
        width: 100%;
    }
    
    #container-3-block-1 > div,
    #container-3-block-2 > div {
        width: 100%;
        height: auto;
        margin: 0 0 15px 0;
    }
    
    #container-3-block-1 img[src*="3-"],
    #container-3-block-2 img[src*="3-"] {
        max-width: 150px;
        margin: 10px auto;
    }
    
    /* === CONTAINER 4 (Для кого) === */
    #forwho-button {
        margin-right: 0;
    }
    
    #container-4 {
        height: auto;
        padding: 20px 15px;
    }
    
    #container-4-header span {
        font-size: 32px;
        line-height: 34px;
        text-align: center;
        margin-right: 0;
    }
    
    #container-4-blocks-sorter {
        flex-direction: column;
        height: auto;
    }
    
    #container-4-block-1,
    #container-4-block-2,
    #container-4-block-3 {
        width: 100%;
        height: auto;
        margin: 0 0 20px 0;
        padding: 20px;
        position: relative;
    }
    
    #container-4-block-1 img,
    #container-4-block-2 img,
    #container-4-block-3 img {
        position: static;
        margin: 10px 0;
    }
    
    /* === CONTAINER 5 (Обучение) === */
    #container-5-header span {
        font-size: 32px;
        line-height: 34px;
    }
    
    #container-5-blocks-sorter {
        flex-direction: column;
    }
    
    #container-5-block-1,
    #container-5-block-2 {
        margin: 0 0 30px 0;
    }
    
    #horizontal-image-1,
    #horizontal-image-2,
    #container-5-blocks-sorter > img {
        display: none;
    }
    
    #ugol-orange-up,
    #ugol-orange-down {
        display: none;
    }
    
    /* === CONTAINER 6 (Доход) === */
    #container-6-blocks-sorter {
        flex-direction: column;
    }
    
    #container-6-block-1,
    #container-6-block-2 {
        width: 100%;
        margin: 0 0 15px 0;
    }
    
    #container-6-block-1 > div,
    #container-6-block-2 > div {
        width: 100%;
        height: auto;
        margin: 0 0 15px 0;
    }
    
    /* === CONTAINER 7 (Почему мы) === */
    #whyme-button {
        margin-right: 0;
    }
    
    #container-7-header span {
        font-size: 32px;
        line-height: 34px;
        margin-right: 0;
    }
    
    #container-7-blocks-sorter {
        flex-direction: column;
        width: 100%;
        height: auto;
    }
    
    #container-7-blocks-sorter > div:first-child {
        display: none;
    }
    
    #container-7-blocks-sorter > div:last-child {
        width: 100%;
        height: auto;
        margin: 0;
    }
    
    /* === CONTAINER 8 (Шаги) === */
    #container-8-header span {
        font-size: 32px;
        line-height: 34px;
    }
    
    #container-8-blocks-sorter {
        flex-direction: column;
    }
    
    #container-8-block-1,
    #container-8-block-2 {
        width: 100%;
    }
    
    #container-8-block-1 > div,
    #container-8-block-2 > div {
        width: 100%;
        height: auto;
        margin: 15px 0;
    }
    
    #container-8-blocks-sorter img[src*="Palka"] {
        display: none;
    }
    
    /* === CONTAINER 9 (Отзывы) === */
    #reviews-button {
        margin-right: 0;
    }
    
    #container-9-header span {
        font-size: 32px;
        line-height: 34px;
        margin-right: 0;
    }
    
    .carousel-inner {
        width: 100%;
    }
    
    .carousel-item > div {
        flex-direction: column;
    }
    
    .carousel-item > div > div {
        width: 100%;
        height: auto;
        margin: 0 0 20px 0;
    }
    
    .carousel-item img[src*="Rectangle"] {
        display: none;
    }
    
    /* === CONTAINER 10 (Покупки) === */
    #buys-button {
        margin-right: 0;
    }
    
    #container-10-header span {
        font-size: 32px;
        line-height: 34px;
        margin-right: 0;
    }
    
    #container-10-header img {
        display: none;
    }
    
    #container-10-blocks-sorter {
        width: 100%;
        height: auto;
        flex-direction: column;
    }
    
    #container-10-blocks-sorter > div {
        width: 100%;
        margin: 0 0 15px 0;
    }
    
    /* === CONTAINER 11 (Как начать) === */
    #container-11-blocks-sorter {
        flex-direction: column;
    }
    
    #container-11-header {
        margin-right: 0;
        align-items: center;
        text-align: center;
    }
    
    #zp-button {
        margin-right: 0;
    }
    
    #container-11-header span {
        font-size: 32px;
        line-height: 34px;
    }
    
    #container-11-blocks-sorter > div:last-child {
        width: 100%;
        margin-top: 30px;
    }
    
    /* === CONTAINER 12 (Кейсы) === */
    #cases-button {
        margin-right: 0;
    }
    
    #container-12-header span {
        font-size: 32px;
        line-height: 34px;
        margin-right: 0;
        margin-left: 0;
    }
    
    .carousel-inner {
        width: 100%;
    }
    
    #carousel-2 .carousel-item > div {
        flex-direction: column;
    }
    
    #carousel-2 .carousel-item img[src*="Rectangle"] {
        display: none;
    }
    
    #carousel-2 .carousel-item > div > div {
        width: 100%;
        margin: 0 0 20px 0;
    }
    
    /* === CONTAINER 13 (FAQ) === */
    #container-13-header span {
        font-size: 32px;
        line-height: 34px;
    }
    
    #container-13-blocks-sorter {
        width: 100%;
        padding: 0 15px;
    }
    
    /* === CONTAINER 14 (Форма внизу) === */
    #container-14-blocks-sorter {
        width: 100%;
        height: auto;
        padding: 20px 15px;
    }
    
    #container-14-blocks-sorter > div {
        flex-direction: column;
        width: 100%;
        height: auto;
    }
    
    #container-14-blocks-sorter img {
        width: 100%;
        max-height: 200px;
        object-fit: cover;
    }
    
    #container-14-blocks-sorter > div > div {
        width: 100%;
        height: auto;
        padding: 20px 15px;
    }
    
    #container-14-blocks-sorter form {
        flex-direction: column;
        align-items: stretch;
    }
    
    #container-14-blocks-sorter .form-field-2 input,
    #container-14-blocks-sorter .form-field-2 select,
    #container-14-blocks-sorter button {
        width: 100%;
        margin: 5px 0;
    }
    
    /* === ФУТЕР === */
    #footer .d-flex {
        flex-direction: column;
    }
    
    #footer p {
        margin: 10px 0;
        text-align: center;
    }
    
    /* === ОБЩИЕ ПРАВИЛА === */
    .btn {
        width: 100%;
        margin: 10px 0;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-size: 28px;
        line-height: 30px;
    }
    
    p, span, div {
        font-size: 16px;
        line-height: 1.5;
    }
}

/* КОНЕЦ */