/* CSS ДЛЯ КАЛЬКУЛЯТОРА "ВАШ ПОМОЩНИК" 
   Версия: Вертикальная прокрутка
   
   СОДЕРЖАНИЕ:
   
   РАЗДЕЛ 1. БАЗОВЫЕ НАСТРОЙКИ
   РАЗДЕЛ 2. ШАПКА И БУРГЕР-МЕНЮ
   РАЗДЕЛ 3. ЭКСПЕРТНОЕ ОКНО
   РАЗДЕЛ 4. ОСНОВНОЙ КОНТЕНТ СМЕТЫ
   РАЗДЕЛ 5. ОБРАТНЫЙ ЗВОНОК В ХЕДЕРЕ
   РАЗДЕЛ 6. МИНИ-КВИЗ
   РАЗДЕЛ 7. ОБЩИЕ СТИЛИ КНОПОК
   РАЗДЕЛ 8. ЧАТ
   РАЗДЕЛ 9. НАД СМЕТОЙ
   РАЗДЕЛ 10. БЛОК РЕЗУЛЬТАТА (СМЕТА)
   РАЗДЕЛ 11. ОКНА И КНОПКИ
   РАЗДЕЛ 12. ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ
   РАЗДЕЛ 13. ИКОНКИ СОЦСЕТЕЙ
   РАЗДЕЛ 14. МОДАЛЬНОЕ ОКНО ВЫБОРА РЕЖИМА СМЕТЫ
   РАЗДЕЛ 15. ССЫЛКИ
   РАЗДЕЛ 16. ИСТОРИЯ СМЕТ
   ВЕДОМОСТЬ МАТЕРИАЛОВ
   МЕНЮ "ОТ ЗАКАЗЧИКА"
*/

/* РАЗДЕЛ 1. БАЗОВЫЕ НАСТРОЙКИ */

:root {
    --main-bg: #fdfdfd;
    --side-bg: #111111;
    --accent: #c5a059; 
    --text-dark: #222222;
    --text-light: #ffffff; /* Добавили */
    --header-h: 5em;
    --nav-width: 20%; /* Фиксируем ширину как на ПК */
    --transition-base: all 0.4s ease;
    --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
}

*::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

html {
    font-size: 16px;
    min-height: 100%;
    height: 100%; 
    width: 100%;
    position: relative;
    scroll-padding-top: var(--header-h);
}

body {
    font-family: sans-serif;
    background-color: var(--main-bg);
    color: var(--text-dark);
}

/* Общие стили для SVG */
.icon-svg {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    fill: currentColor;
    transition: var(--transition-base);
}

.icon-svg:hover {
    transform: scale(1.1);
}

.icon-svg:active {
    transform: scale(0.95);
    transform: translateY(2px);
}

.inline-svg {
    display: inline-block;
    margin-left: 3px;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    transform: translateX(0px);
    transition: transform 0.3s ease;
}

button:hover .inline-svg,
a:hover .inline-svg{
    transform: translateX(5px);
}

button:active .inline-svg,
a:active .inline-svg {
    transform: translateX(0px);
}

.vira-2 {
    transform: translateY(-2px);
}

.svg-big {
    width: 1.5em;
    height: 1.5em;
}

.icon-emodji {
    font-size: 32px;
    margin-bottom: 5px;
    transition: var(--transition-base);
}

/* РАЗДЕЛ 2. ШАПКА И БУРГЕР-МЕНЮ */
.main-header {
    width: 100%;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1003;
}

/* Скрываем мобильные элементы на ПК по умолчанию */
.menu-toggle, .phone-icon-circle {
    display: none;
}

.logo a {
    color: inherit !important;
    text-decoration: none !important;
}

.logo-desktop {
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.logo-desktop span {
    color: #b8860b;
}

.header-info {
    display: flex;
    align-items: center;
    gap: 30px;
}

.work-time {
    font-size: 0.75rem;
    color: #555;
    text-align: right;
    border-right: 1px solid #ddd;
    padding-right: 20px;
    text-transform: uppercase;
}

.contacts {
    display: flex;
    align-items: center;
    gap: 20px;
}

.phone {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.phone-text {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-dark);
}

.socials {
    display: flex;
    gap: 10px;
}

.socials a {
    text-decoration: none;
    font-size: 1.2rem;
    color: var(--accent);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center; /* Центрирование иконок мессенджеров */
    background: #f8f8f8;
    border-radius: 50%;
    transition: var(--transition-base);
}

.socials a:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px);
}

.wrapper {
    display: flex;
    margin-top: var(--header-h);
    min-height: calc(100vh - var(--header-h));
    width: 100%;
    background: linear-gradient(135deg, rgba(245, 247, 250, 0.85), rgba(195, 207, 226, 0.85)), url('../pix/bg/main.webp') center center/cover no-repeat fixed;
}

.side-nav {
    width: var(--nav-width);
    background: var(--side-bg);
    position: fixed;
    height: calc(100vh - var(--header-h)); /* Высота без учета шапки */
    z-index: 1002;
    display: flex;
    flex-direction: column;
    transition: left 0.4s ease;
}

.nav-container {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
}

.nav-link {
    padding: 1.8rem 2rem;
    color: #999;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    border-bottom: 1px solid #1a1a1a;
    transition: var(--transition-base);
}

.nav-link:hover {
    color: var(--text-light);
    background: #161616;
    padding-left: 2.5rem;
    box-shadow: inset 4px 0 0 var(--accent);
}

.nav-link.active {
    color: var(--text-light);
    background: #1a1a1a;
    padding-left: 2.8rem;
    box-shadow: inset 4px 0 0 var(--accent);
}

.nav-link.active .num {
    color: var(--accent);
}

/* Номера пунктов (01, 02...) если они есть в HTML */
.nav-link .num {
    margin-right: 12px;
    color: #767676;
    transition: color 0.3s ease;
}

.nowrap {
    white-space: nowrap;
}

@media (max-width: 880px), (max-height: 500px) and (orientation: landscape) {
    
    .main-header {
        padding: 0 20px;
    }
    
    .wrapper {
    background: linear-gradient(135deg, rgba(245, 247, 250, 0.85), rgba(195, 207, 226, 0.85)), url('../pix/bg/main_mobile.webp') center center/cover no-repeat fixed;
    }
    
    .logo, .work-time, .phone-text {
        display: none !important;
    }
    
    .contacts {
        gap: 10px;
    }
    
    .menu-toggle {
        display: flex;
        font-size: 1.4rem;
        cursor: pointer;
        z-index: 1100;
    }

    .phone-icon-circle {
        display: flex;
        width: 40px;
        height: 40px;
        background: #f8f8f8;
        color: var(--accent);
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        font-size: inherit;
    }
    /* Меню: Выезжающая панель */
    .side-nav {
        position: fixed;
        min-width: 250px;
        top: 0;
        left: -100%;
        height: 100vh;
        padding-top: 6em;
    }

    .side-nav.active {
        left: 0;
        box-shadow: 10px 0 50px rgba(0,0,0,0.5);
    }
    
    .menu-toggle .icon-chevron {
        animation: arrow-nudge 2.5s ease-in-out infinite;
        animation-delay: 1s;
        display: inline-block; /* Обязательно для работы transform */
        text-shadow: 0 0 10px rgba(197, 160, 89, 0.4);
    }
}

@media (max-width: 880px) {
    .side-nav {
        width: 70%;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .side-nav {
        width: 40%;
        overflow-Y: auto;
    }
}

/* РАЗДЕЛ 3. ЭКСПЕРТНОЕ ОКНО */
.side-chat-offer {
    opacity: 0;
    max-width: 100%;
    min-width: 160px;
    margin: auto 2rem 15px 2rem;
    border-radius: 10px;
    padding: 25px 15px 15px 15px;
    background: var(--accent);
    box-shadow: inset 0 0 10px #6b4e06;
    transition: opacity 0.5s ease, transform 1s ease;
    transform: translateY(100%);
}

.side-chat-offer.active {
    opacity: 1;
    transform: translateY(0);
}

.side-chat-offer-inner {
    text-align: center;
}

.side-chat-avatar {
    margin-bottom: 8px;
}

.side-chat-avatar img {
    width: 70%;
    max-width: 80px;
    border-radius: 10px;
    box-shadow: 2px 2px 4px #6b4e06;
}

.side-chat-offer p {
    color: #333;
    font-size: clamp(0.6rem, 1vw, 0.95rem);
    line-height: 1.35;
    margin: 0 0 14px 0;
}

.side-chat-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.side-btn-no,
.side-btn-yes {
    padding: 10px 18px;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    flex: 1;
    max-width: 110px;
}

.side-btn-no {
    background: #f5f0e6;
    color: #666;
    border: 1px solid #e0d5b8;
}

.side-btn-no:hover {
    background: #e8e0d0;
}

.side-btn-yes {
    background: #222;
    color: #fff;
    border: none;
    box-shadow: 0 3px 8px rgba(184, 134, 11, 0.3);
}

.side-btn-yes:hover {
    background: #000;
    transform: translateY(-1px);
}

@media (max-width: 1090px) {
    .side-chat-offer {
        margin-left: 10px;
        margin-right: 10px;
    }
}

@media (max-width: 880px), (max-height: 815px) and (orientation: landscape) {
    .side-chat-offer {
        display: none;
    }
}

/* РАЗДЕЛ 4. ОСНОВНОЙ КОНТЕНТ СМЕТЫ */
.calc-header {
    padding-bottom: 30px;
    margin-bottom: 15px;
    border-bottom: 1px solid #f0f0f0; /* Легкая разделяющая черта */
}

.header-line {
    width: 40px;
    height: 3px;
    background: var(--accent);
    margin-bottom: 15px;
    border-radius: 2px;
}

.calc-header h1 {
    font-size: clamp(1.8rem, 2.4vw, 2.8rem);
    font-weight: 900;
    color: var(--text-dark);
    letter-spacing: -1px;
    margin-bottom: 10px;
    text-transform: none; /* Оставляем естественный регистр для серьезности */
}

.calc-header .sub-title {
    font-size: clamp(1rem, 1.1vw, 1.2rem);
    color: #666;
    font-weight: 400;
    max-width: 800px; /* Чтобы текст не растягивался на всю ширину и легко читался */
}

.city-accent {
    color: var(--text-dark);
    padding-bottom: 2px;
    border-bottom: 2px solid var(--accent);
    white-space: nowrap;
}

.trust-line-calc {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    margin-top: 10px;
    padding-top: 5px;
    cursor: default;
}

.trust-item-calc {
    font-size: clamp(0.55rem, 0.75vw, 0.9rem);
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-bounce);
    min-width: 65px;
}

.trust-item-calc:hover {
    transform: scale(1.1);
}

.calc-content {
    margin-left: var(--nav-width);
    padding: 40px;
    width: 80%;
}

#flex_table {
    position: relative;
    display: flex;
    reading-order: items;
    flex-direction: column;
    gap: 10px;
    contain: layout style;
}

.smart-separator-holder {
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    top: var(--header-h, 100px);
    z-index: 1001;
    height: 0;
    justify-content: center;
    pointer-events: none;
}

.smart-separator {
    flex: 0 1;
    display: none;
    position: relative; /* Для позиционирования стрелки */
    pointer-events: auto;
    margin: 6rem auto 0 auto;
    min-width: 280px;
    max-width: 385px;
    min-height: 50px;
    background: rgba(10, 10, 10, 0.95);
    color: #ffcc00;
    padding: 16px 28px 16px 28px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 1px solid rgba(255, 204, 0, 0.35);
    animation: bounceAndPulse 2s infinite ease-in-out;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    /* Эффект стекла */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Красивая широкая стрелка */
.smart-separator::before {
    content: '';
    position: absolute;
    bottom: 100%; /* Прямо над плашкой */
    left: 50%;
    transform: translateX(-50%);
    width: 120px;  /* Большая ширина */
    height: 15px;  /* Малая высота */
    background: var(--accent);
    margin-bottom: 10px;
    /* Рисуем широкую стрелку через путь */
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 85% 100%, 50% 30%, 15% 100%);
    filter: drop-shadow(0 0 5px rgba(255, 204, 0, 0.5));
}

.smart-separator:hover {
    border-color: rgba(255, 204, 0, 0.8);
    color: #ffffff;
    transform: scale(1.03);
}

.smart-separator:hover::before {
    opacity: 1;
}

#search:not(:focus):not(.interacted) {
    animation: goldPulse 3s ease-in-out infinite;
}

/* Стили для фокуса */
#search:focus, #promo:focus {
    outline: none;
    border-color: var(--accent);
    background-color: #ffffff; /* Чуть светлее при вводе */
    transition: var(--transition-base);
    animation: hi_search 1.5s ease 100ms;
}

.search-wrapper.sticky-search {
    flex: 1;
    position: relative;
    z-index: 999;
}

/* Золотой крестик */
.clear-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--accent); /* Золото */
    font-size: 28px;
    font-weight: 300; /* Тонкий изящный крестик */
    line-height: 1;
    display: none;
    z-index: 1002;
    user-select: none;
    transition: all 0.2s ease;
}

.clear-btn:hover {
    color: #b8860b;
    transform: translateY(-50%) scale(1.2);
}

/* Эффект тумана без изменений */
#detail_button.is-foggy, #search.is-foggy, #promo.is-foggy, .flex_tr.is-foggy {
    pointer-events: none;
    user-select: none;
    filter: blur(3px) grayscale(0.2);
    opacity: 0.8;
    transition: filter 0.5s ease, opacity 0.5s ease;
}

/* Контейнер поиска и промо */
.flex_container {
    display: flex;
    gap: 15px;
    position: sticky;
    position: -webkit-sticky;
    top: var(--header-h, 5px);
    z-index: 1001;
    padding-top: 10px;
    background: transparent;
}

.flex_block_grey {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 40px 15px 15px;
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 8px;
    font-family: sans-serif;
    transition: var(--transition-bounce);
    font-size: clamp(1em, 1.2vw, 1.3em);
}

.flex_block_grey:hover {
    outline: none;
    cursor: pointer;
}

/* Заголовки разделов (ПОЛЫ) */
.smeta_chapter {
    background: #f4f4f4 !important;
    color: var(--accent);
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-top: 20px;
    pointer-events: none; /* Чтобы не нажималось */
}

.price-txt {
    flex: 3;
    text-align: left;
    font-size: clamp(0.6rem, 0.8rem, 1rem);
    font-weight: 600;  /* Сделаем шрифт полужирным */
    color: #2c3e50;    /* Глубокий темно-синий/графитовый вместо просто серого */
    line-height: 1.3;
    letter-spacing: 0.3px; /* Добавим «воздуха» между буквами */
    text-transform: none;  /* Оставляем как в базе, но... */
    transform: translateX(0);
    transition: var(--transition-base);
    padding: 5px 0;
}

/* Золотая подсветка для точных совпадений */
mark.search-highlight, mark.search-highlight-fuzzy {
    background: linear-gradient(180deg, #ffdf00 0%, #d4af37 100%);
    color: #000;
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Делаем первую букву каждой услуги чуть крупнее или другого цвета */
.price-txt::first-letter {
    color: var(--accent);
    font-weight: 800;
}

/* Эффект при наведении на строку */
.flex_tr:hover .price-txt {
    color: #000;
    transform: translateX(10px); /* Текст мягко отодвигается от края */
}

.price-num {
    flex: 1;
    text-align: center;
    font-family: sans-serif;
    font-weight: 700;
    color: var(--accent); /* Твоё золото */
    font-size: 1.1rem;
    letter-spacing: -0.5px;
    position: relative;
    transition: color 0.3s ease;
}

/* Псевдоэлемент - золотой маркер изменения */
.price-num.changed::after {
    content: '';
    position: absolute;
    right: 15px;      /* Выносим чуть правее текста */
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background-color: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--accent);
    opacity: 0;
    transition: var(--transition-bounce);
}

/* Состояние, когда маркер виден */
.price-num.changed.active::after {
    opacity: 1;
    right: 20px; /* Небольшое движение при появлении */
}

.flex_tr:hover:not(.smeta_chapter) {
    background: #ffffff !important;
    box-shadow: inset 4px 0 0 var(--accent); /* Тонкая золотая полоска слева при наведении */
    transform: translateX(10px) /* Легкий сдвиг всей строки */
}

.flex_tr:hover .price-num {
    transform: translateX(5px) scale(1.05); /* Цена чуть увеличивается */
}

.flex_tr {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    padding: 8px 25px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    width: 100%;
    box-sizing: border-box;
    content-visibility: auto;
    contain-intrinsic-size: auto 54px; /* Резервируем место */
    max-width: 100%;
    transform: translateX(0);
    transition: transform 0.4s ease;
    border: 1px solid rgba(197, 160, 89, 0.3);
}

/* Кнопка закрытия */
.closed {
    cursor: pointer;
    margin-right: 15px;
    color: #ccc; /* Делаем иконку спокойной по умолчанию */
    font-size: 1.1rem;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

/* Эффект при наведении на всю строку (строка подсвечивает иконку) */
.flex_tr:hover .closed {
    color: #888;
}

/* Эффект при наведении на саму иконку */
.closed:hover {
    color: #ff4d4d !important;
    background: #fff0f0;
    transform: rotate(90deg); /* Легкий визуальный эффект при наведении */
}

/* Наши инпуты */
.req_quantity {
    width: 100px;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    color: #2c3e50; /* Глубокий темный цвет вместо чисто черного */
    background: #ffffff; /* Белый фон для максимального контраста */
    border: 1px solid #dcdcdc;
    font-weight: 600; /* Делаем цифры чуть толще */
    transition: var(--transition-base);
}

.req_quantity:focus {
    outline: none;
    border-color: #d4af37; /* Золотой акцент при вводе */
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
}

.req_quantity::placeholder {
    color: #6a6a6a; /* Более темный серый, проходящий тесты контрастности */
    opacity: 1; /* Чтобы Firefox не делал его бледнее */
}

/* Пустое поле */
.req_quantity.is-empty {
    background: #ffffff;
    color: #2c3e50;
}

/* Заполненное поле (золотой фон) */
.req_quantity.is-filled {
    background: #c5a059;
    color: #000;
}

.req_quantity.is-filled:hover {
    filter: brightness(1.1);
    cursor: pointer;
}

/* 5. ИТОГОВАЯ СМЕТА (РЕЗУЛЬТАТ) С CLAMP */
.col-name {
    flex: 3;
    display: flex;
    align-items: center;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    font-family: sans-serif;
    gap: 10px;
}

.col-price, .col-qty {
    flex: 1;
    text-align: right;
    font-size: clamp(0.7rem, 0.8vw, 0.875rem);
    color: #7f8c8d;
    font-family: sans-serif;
    margin: 0 3px;
}

.col-sum {
    flex: 1;
    text-align: right;
    font-size: clamp(0.7rem, 1.1vw, 1.125rem);
    font-weight: 700;
    color: #2c3e50;
    font-family: sans-serif;
    transition: color 0.2s ease;
}

/* Заголовки колонок сметы */
.header-row {
    background: #fcfcfc;
    border-bottom: 2px solid #eee;
}

.header-row div[class^="col-"] {
    font-size: clamp(0.625rem, 0.7vw, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
}

@media (max-width: 880px), (max-height: 500px) and (orientation: landscape) {
    .calc-content { 
        margin-left: 0; 
        padding: 30px 15px;
        width: 100%;
    }
    
    .flex_tr {
        flex-direction: column; /* Превращаем строку в карточку */
        position: relative;
        align-items: flex-start !important;
        padding: 15px !important;
        gap: 8px;
        border: 1px solid #eee; /* Добавляем границы для четкости */
    }
    
    .flex_tr:hover:not(.smeta_chapter) {
        transform: translateX(0)
    }
    
    .flex_td {
        width: 100% !important; /* Каждая колонка теперь занимает всю ширину карточки */
        text-align: left !important;
        display: flex;
        justify-content: space-between; /* Название слева, инпут справа */
        align-items: center;
    }
    
    .flex_td.price-txt {
        display: inline-block;
    }
    
    .search-wrapper.sticky-search {
        position: sticky;
        position: -webkit-sticky;
        top: var(--header-h);
    }
    
    /* Делаем инпут количества удобным для пальца */
    .req_quantity {
        width: 80px !important;
        min-height: 44px;
        margin-left: auto; /* Прижимаем к правому краю карточки */
        font-size: 16px !important; /* Предотвращает авто-зум в iOS */
    }

    /* Скрываем крестик удаления (closed) или выносим его в угол */
    .closed {
        position: absolute;
        bottom: 20px;
        left: 15px;
        width: 34px;  /* Чуть увеличим для удобства */
        height: 34px;
        background: #fff; /* Белый фон */
        color: var(--accent); 
        border-radius: 8px; /* Сделаем квадрат со скруглением под стиль инпутов */
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px var(--accent);
        border: 1px solid #fceaea;
        font-size: 16px; /* Размер самой иконки */
        cursor: pointer;
        z-index: 10;
    }

    /* Эффект нажатия для мобилок */
    .closed:active {
        background: #fdeaea;
        transform: scale(0.9);
    }
    
    .flex_container {
        display: contents;
        position: relative;
        flex-direction: column; /* Ставим инпуты друг под друга */
        gap: 10px;
        margin-bottom: 0;
        width: 100%; /* Чтобы не вылезали */
    }
}

/* РАЗДЕЛ 5. ОБРАТНЫЙ ЗВОНОК В ХЕДЕРЕ */
.callback-trigger {
    background: transparent;
    border: 1px solid var(--accent);
    color: #b8860b;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    gap: 8px;
}

.callback-trigger:hover {
    background: var(--accent);
    color: #fff;
}

/* Шапка модалки */
.modal-header h3 {
    font-size: 1.8rem;
    color: #222;
    margin-bottom: 10px;
    font-weight: 800;
}
.modal-header p {
    color: #777;
    font-size: 0.95rem;
    margin-bottom: 30px;
    line-height: 1.4;
}

/* Группа ввода с эффектом Float Label */
.input-group {
    position: relative;
    margin-bottom: 15px;
}

/* Стили самой подписи */
.input-group label {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #999;
    pointer-events: none; /* Чтобы клик проходил сквозь текст в поле */
    transition: all 0.2s ease-out;
    background-color: transparent;
    padding: 0 5px;
}

/* Состояние, когда поле в фокусе ИЛИ не пустое */
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
    top: 0;
    font-size: 0.75rem;
    color: var(--accent);
    background-color: #fff; /* Перекрываем рамку, чтобы текст был читаем */
    transform: translateY(-50%) scale(0.9);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Небольшая правка для input, чтобы текст не наезжал на рамку */
.input-group input::placeholder {
    color: transparent; /* Прячем дефолтный плейсхолдер, пока поле пустое */
}

.input-group input:focus::placeholder {
    color: #ccc; /* Показываем маску (+7...), только когда юзер нажал на поле */
}

.input-group input {
    width: 100%;
    padding: 18px 20px;
    border: 2px solid #eee;
    border-radius: 12px;
    font-size: 1.1rem;
    transition: all 0.3s;
    background: #f9f9f9;
}

.input-group input:focus {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 5px 15px rgba(197, 160, 89, 0.1);
    outline: none;
}

.modal-footer {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #f0f0f0;
}

.chat-invitation p {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 15px;
}

/* Кнопка отправки - мощная и солидная */
.btn-submit {
    width: 100%;
    background: linear-gradient(135deg, #222 0%, #444 100%);
    color: #fff;
    padding: 20px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

@media (max-width: 880px), (max-height: 500px) and (orientation: landscape) {
    .callback-label { display: none; } /* Прячем текст на смартфонах */
    
    .callback-trigger {
        border: none;
        padding: 0;
        width: 40px;
        height: 40px;
        font-size: inherit;
        justify-content: center;
        background: #f8f8f8;
        border-radius: 50%;
    }
}

/* РАЗДЕЛ 6. МИНИ-КВИЗ */
.calc-presets {
    margin-bottom: 30px;
}

.presets-title { 
    font-weight: 700; 
    margin-bottom: 12px; 
    font-size: 0.9rem; 
    color: #555; 
    text-transform: uppercase; 
    display: inline-flex;
    vertical-align: middle;
    justify-content: flex-end;
    width: 100%;
    gap: 8px; 
}

.preset-buttons { 
    display: flex; 
    gap: 10px; 
    flex-wrap: wrap; 
}

.btn-preset { 
    display: flex;
    flex-direction: column;
    flex: 1;
    box-sizing: border-box;
    font-weight: 600;
    font-size: 0.9rem;
    align-items: center;
    padding: 15px;
    background: #fff;
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-bounce);
    color: var(--text-dark);
}

.btn-preset span {
    white-space: nowrap;
}

.preset-params-box {
    background: var(--main-bg); 
    margin-bottom: 20px;
    padding: 25px; 
    border-radius: 12px; 
    border: 1px solid rgba(197, 160, 89, 0.3);
    animation: fadeIn 0.5s ease;
}

.PPM-res {
    border-radius: 12px 12px 0 0 !important;
    max-width: 900px;
    margin: 30px auto 0 auto;
    background: linear-gradient(180deg, #fefefe 0%, #f0f0f0 100%);
}

.field-with-button {
    display: flex;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 14px;
    padding: 6px;
    transition: var(--transition-base);
}

.field-with-button:hover {
    cursor: pointer;
    box-shadow: inset 0px 1px 5px #333;
}

.field-with-button:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.1);
}

.field-with-button input {
    flex: 1;
    border: none;
    border-radius: 10px;
    outline: none !important;
    padding: 10px;
    font-size: clamp(0.8em, 1vw, 0.9em);
    font-weight: 600;
    color: var(--text-dark);
    background: transparent;
    min-width: 0;
}

.btn-apply-quiz, .btn-apply-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;      /* Запрет сжатия */
    min-width: fit-content;
    background: var(--accent);
    color: #2c3e50;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 700;
    gap: 10px;
    cursor: pointer;
    transition: var(--transition-bounce);
    flex-shrink: 0;
}

.btn-apply-quiz:hover, .btn-apply-premium:hover {
    transform: translateX(-5px);;
}

.btn-apply-quiz:active, .btn-apply-premium:active {
    transform: translateX(0px);;
}

.options-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

h2#quiz_title {
    font-size: clamp(1rem, 1.1vw, 1.1rem);
}

.options-grid > div {
    flex: 1 1 calc(50% - 15px); /* Две в ряд с учетом gap */
    min-width: 140px;
    box-sizing: border-box;
}

.options-grid.is-single-column > div {
    flex: 1 1 100%;
    max-width: 450px;
    margin: 0 auto;
}

.quiz-subtitle {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 15px;
}

/* Единый стиль карточек квиза */
.quiz-card {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    min-height: 110px;
    box-sizing: border-box;
}

.btn-preset:hover, .quiz-card:hover {
    border-color: var(--accent);
    background: #fffaf2;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(197, 160, 89, 0.15);
}

/* Иконка внутри карточки */
.quiz-card .card-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
    transition: transform 0.3s ease;
}

.btn-preset:hover .icon-emodji, .quiz-card:hover .card-icon {
    transform: scale(1.2);
}

.quiz-card .card-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
}

/* Стили для ВЫБРАННОГО элемента квиза */
.btn-preset.active, .quiz-card.is-checked {
    background: #fffaf2;
    border-color: var(--accent);
}

.btn-preset.active::after, .quiz-card.is-checked::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--accent);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

/* Скрываем реальный инпут, но держим в доступе */
.quiz-card input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}

.quiz-nav-container {
    display: flex;
    justify-content: flex-end; /* Кнопка справа на десктопе */
}

.btn-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.1);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin-left: 5px;
}

@media (max-width: 880px), (max-height: 500px) and (orientation: landscape) {
    .btn-apply-premium span {
        display: none;
    }
    
    .btn-apply-premium svg {
        margin: 0;           /* Убираем лишние отступы у иконки */
        width: 18px;         /* Чуть увеличим иконку для удобства нажатия */
        height: 18px;
    }

    .field-with-button input {
        padding: 10px 10px;  /* Немного уменьшим отступы инпута на мобильных */
    }
    
    .quiz-nav-container {
        justify-content: center; /* Кнопка по центру на мобильных */
    }
    
    .btn-apply-quiz {
        width: 100%;
    }
}

/* РАЗДЕЛ 7. ОБЩИЕ СТИЛИ КНОПОК */
/* Кнопки "составить смету" и "очистить поля" */
.sticky-actions {
    position: sticky;
    position: -webkit-sticky;
    order: 9999;
    bottom: 10px;
    left: 0;
    width: 100%;
    background: transparent;
    backdrop-filter: blur(10px); /* Эффект размытия стекла */
    z-index: 1000; /* Чуть ниже шапки, но выше таблицы */
    margin-top: 30px;
}

.actions-inner {
    display: flex;
    gap: 15px;
    margin: 0 auto;
}

.btn-main, .btn-secondary {
    flex: 1;
    padding: 18px 30px;
    border: 1px solid #ccc;
    border-radius: 12px;
    font-size: clamp(0.65rem, 0.8vw, 1.1rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Яркая кнопка (Показать смету) */
.btn-main {
    background: var(--side-bg); /* Темная, солидная */
    color: #f0f0f0;
}

.btn-main:hover {
    background: #000;
    transform: translateY(-2px);
    color: #fff;
}

.btn-main:active {
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.6);
    transform: translateY(2px); /* Слегка вдавливаем кнопку */
}

/* Второстепенная кнопка (Очистить) */
.btn-secondary {
    background: #f0f0f0;
    color: #555;
}

.btn-secondary:hover {
    background: #e5e5e5;
    color: #444;
    transform: translateY(-2px);
}

.btn-secondary:active {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) inset;
    transform: translateY(2px); /* Слегка вдавливаем кнопку */
}

.btn-tg {
    background: var(--accent);
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    padding: 15px 25px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition-bounce);
    text-transform: uppercase;
    font-size: 0.8rem;
}

.btn-tg:hover {
    background: #2095cd;
    filter: brightness(1.1);
    transform: scale(1.05);
}

@media (max-width: 880px), (max-height: 500px) and (orientation: landscape) {
    .sticky-actions {
        bottom: 0 !important;
    }
    
    .actions-inner {
        gap: 7px !important;
    }
    
    .btn-main, .btn-secondary {
        padding: 16px 7px !important;
        border-radius: 12px 12px 0 0 !important;
    }
    
    .btn-main {
        border: 1px solid #000 !important;
    }
}

/* РАЗДЕЛ 8. ЧАТ */
.chat-window {
    padding: 0 !important;
}
.chat-header {
    background: #fdfaf4;
    border-radius: 20px 20px 0 0;
    padding: 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(197, 160, 89, 0.6);
}

.master-avatar {
    position: relative;
    margin-right: 12px;
}

.master-avatar img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #c5a059;
}

.master-info {
    text-align: left;
}

.master-info strong {
    display: block;
}

.master-info span {
    font-size: clamp(0.7rem, 0.8vw, 0.9rem);
}

.online-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #2ecc71;
    border: 2px solid #fff;
    border-radius: 50%;
}

.chat-messages {
    height: 350px;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
}

.msg {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 15px;
    font-size: 0.85em;
    line-height: 1.4;
}

.bot-msg {
    background: #f1f1f1;
    align-self: flex-start;
    border-bottom-left-radius: 2px;
    text-align: left;
    box-shadow: 1px 1px 1px grey;
    animation: slideInChat 0.3s ease-out;
}

@keyframes slideInChat {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.user-msg {
    background: var(--accent);
    color: var(--text-dark);
    align-self: flex-end;
    border-bottom-right-radius: 2px;
    box-shadow: 1px 1px 1px grey;
}

.chatOptions-wrapper {
    overflow: hidden;
}

.chat-options {
    padding: 15px;
    border-radius: 0 0 20px 20px;
    background: #fdfaf4;
    display: block;
    white-space: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    border-top: 1px solid rgba(197, 160, 89, 0.6)
}

/* Запуск анимации при открытии модалки */
.modal.active .chat-options {
    animation: hintScroll 1s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.chat-options::after {
    content: '';
    flex: 0 0 15px; /* Фантомный блок для отступа справа */
}

.opt-btn {
    white-space: nowrap;
    margin-right: 8px;
    opacity: 1;
    background: #fff;
    border: 1px solid #b8860b;
    color: #9d7208;
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85em;
    transition: 0.3s;
}

.opt-btn:hover {
    background: #c5a059;
    color: var(--text-dark);
}

.opt-btn:disabled {
    background-color: #ccc !important;
    border-color: #999 !important;
    color: #666 !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Сочная премиальная кнопка "Свой вопрос" */
.opt-btn.own-question {
    background: linear-gradient(135deg, #c5a059 0%, #b38a3e 100%);
    color: #fff !important;
    border: none;
    padding: 8px 12px;
    text-shadow: 1px 1px grey;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 
        0 4px 15px rgba(197, 160, 89, 0.4), 
        inset 0 -3px 0 rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Бесконечный блик */
.opt-btn.own-question::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%; /* Стартуем далеко слева */
    width: 40%;
    height: 200%;
    background: linear-gradient(
        to right, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.5) 50%, 
        rgba(255,255,255,0) 100%
    );
    transform: rotate(30deg);
    /* Запускаем бесконечную анимацию */
    animation: shine-infinite 4s infinite linear;
}
/* Реакция на наведение */
.opt-btn.own-question:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.system-msg {
    text-align: center;
    font-size: 12px;
    background: #fff4e5; /* Светло-оранжевый фон */
    color: #856404;
    border-radius: 8px;
    padding: 5px 10px;
    margin: 10px auto;
    width: fit-content;
    border: 1px solid #ffeeba;
}

/* Кнопка "Обсудить с мастером" в результате сметы */
.btn-master-inline {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    text-shadow: 1px 1px grey;
    font-variant: small-caps;
    background: linear-gradient(135deg, #c5a059 0%, #b38a3e 100%);
    color: #fff !important;
    padding: 14px 28px; /* Сделали чуть крупнее */
    border-radius: 12px;
    border: none;
    text-decoration: none;
    font-weight: 800;
    font-size: clamp(15px, 1.2vw + 8px, 18px);
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    overflow: hidden;
    /* Глубокая тень для объема */
    box-shadow: 0 10px 20px rgba(197, 160, 89, 0.3);
    /* Запускаем пульсацию всей кнопки */
    animation: btn-pulse 2s infinite;
}

/* Эффект бесконечного блика */
.btn-master-inline::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        to right, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.4) 50%, 
        rgba(255,255,255,0) 100%
    );
    transform: rotate(30deg);
    animation: shine-infinite 3s infinite linear;
}

/* Анимация пульсации */
@keyframes btn-pulse {
    0% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(197, 160, 89, 0); }
    100% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0); }
}

/* Анимация блика */
@keyframes shine-infinite {
    0% { left: -150%; }
    25% { left: 150%; }
    100% { left: 150%; }
}

.btn-master-inline:hover {
    transform: translateY(-4px) scale(1.03);
    filter: brightness(1.1);
    box-shadow: 0 15px 30px rgba(197, 160, 89, 0.4);
}

.btn-master-inline:active {
    transform: translateY(-1px) scale(0.98);
}

.chat-btn-disabled {
    opacity: 0.5;
    pointer-events: none; /* Кнопка перестает реагировать на клики */
    filter: grayscale(1); /* Делаем её серой */
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .btn-master-inline {
        animation: none;
    }
}

@media (max-width: 880px), (max-height: 500px) and (orientation: landscape) {
    .msg {
        max-width: 100%;
    }
    
    .btn-master-inline {
        width: 100%; /* Кнопка на всю ширину экрана */
        max-width: 320px;
        order: 1; /* Кнопка мастера всегда первая сверху */
    }
}

@keyframes hintScroll {
    0% { scroll-left: 0; }
    30% { transform: translateX(-30px); }
    60% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}

/* Описание анимации блика */
@keyframes shine-infinite {
    0% { left: -150%; }
    20% { left: 150%; }  /* Быстро пролетает за 0.8 сек (20% от 4с) */
    100% { left: 150%; } /* Остальное время (3.2 сек) "отдыхает" */
}

/* РАЗДЕЛ 9. НАД СМЕТОЙ */
.optimize-smeta-box {
    display: none;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(184, 134, 11, 0.15);
    position: relative;
    overflow: hidden;
    padding: 30px 15px;
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.08);
    max-width: 900px;
    margin: 0 auto;
}

.optimize-smeta-box.active {
    display: block;
}

.optimize-smeta-box h2 {
    font-weight: 600;
    color: #b8860b;
    margin-bottom: 20px;
    font-size: clamp(1.2rem, 1.5vw, 1.4rem);
    line-height: 1.5;
}

.osb-desc {
    color: #555;
    font-size: clamp(0.8rem, 1.1vw, 1rem);
    line-height: 1.5;
    max-width: 650px;
    margin: 0 auto 23px auto;
}

.osb-button-container {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-optimize-main {
    background: #b8860b;
    color: #fff;
    font-variant: small-caps;
    padding: 14px 32px;
    font-size: 1.05rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(184, 134, 11, 0.25);
}

.btn-optimize-main:hover {
    background: #d4a017;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(184, 134, 11, 0.35);
}

.btn-optimize-secondary {
    background: transparent;
    color: #b8860b;
    font-variant: small-caps;
    border: 2px solid #b8860b;
    padding: 14px 32px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-optimize-secondary:hover {
    transform: translateY(-2px);
    color: #b0800b;
}

.osb-notice {
    margin-top: 16px;
    font-size: clamp(0.7rem, 0.95vw, 0.85rem);
    color: #777;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 880px), (max-height: 500px) and (orientation: landscape) {
    
    .btn-optimize-main, .btn-optimize-secondary {
        width: 100%;
        max-width: 320px;
    }
}

/*  РАЗДЕЛ 10. БЛОК РЕЗУЛЬТАТА (СМЕТА) */
#resault {
    background: #fff;
    padding: 30px 15px;
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.08);
    max-width: 900px;
    margin: 40px auto 0 auto;
    opacity: 0;
    transition: opacity 0.8s ease;
}

#resault.active {
    opacity: 1;
}

#resault.params {
    border-radius: 0 0 20px 20px;
    margin: 0 auto;
}

.result-header { 
    margin-bottom: 30px; 
    border-bottom: 2px solid var(--accent); 
    padding-bottom: 20px; 
}

.result-header h2 { 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    color: var(--text-dark);
}

.modern-table { 
    width: 100%; 
    margin-bottom: 30px; 
}

.smeta-row {
    display: flex;
    position: relative;
    padding: 15px 10px;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

weight-summary-row {
    background: rgba(0, 0, 0, 0.02);
    font-size: clamp(0.7em, 2vw, 0.9em);
    padding: 8px 15px;
}

.header-row { 
    font-weight: 700;
    font-size: 0.8rem; 
    text-transform: uppercase; 
}

.smeta-row.total-row {
    background: #fff;
    border-top: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    padding: 25px 10px;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Когда мышка наведена на .col-delete, меняем фон у родителя .smeta-row */
.smeta-row:has(.col-delete:hover) {
    background-color: #fffafa !important;
    outline: 1px solid #fee2e2;
}

.smeta-row:has(.col-delete:hover) .col-name,
.smeta-row:has(.col-delete:hover) .col-sum {
    color: #b91c1c;
    transition: color 0.2s ease;
}

/* Базовый стиль для десктопа */
.col-delete {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 23px;
    height: 23px;
    border-radius: 4px;
    color: #9ca3af;
    flex-shrink: 0; /* Чтобы не сжималась, если текст длинный */
    transition: all 0.2s ease;
    cursor: pointer;
    animation: deleteHint 1.5s ease-in-out 0.5s 1;
}

.col-delete:hover {
    background: #fef2f2; /* Очень светлый красный фон */
    color: #ef4444; /* Насыщенный красный при наведении */
    transform: scale(1.05);
}

.col-delete svg {
    transition: transform 0.2s ease;
}

.col-delete:active {
    transform: scale(0.9);
}

/* Текст "Итого по смете" - в стиле заголовков, но крупнее */
.total-row .col-txt {
    font-size: clamp(0.8em, 2vw, 1.1em);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dark);
}

/* Контейнер суммы - убираем лишние рамки и градиенты */
.total-amount-wrapper {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.total-label-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    text-align: left;
    flex: 1;
}

/* Общий контейнер калькулятора сроков */
#prod-calc-container {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: clamp(0.6em, 2vw, 0.85em);
    font-family: inherit;
    color: #888;
    margin: 4px 0;
}

/* Статичный текст трудозатрат */
.total-prod-hours {
    font-weight: 500;
}

/* Текстовая ссылка-триггер (рассчитать сроки) */
.total-hint-trigger {
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px dashed #bbb;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.total-hint-trigger:hover {
    color: #b89047;
    border-bottom-color: #b89047;
}

/* ОБЪЕДИНЕННАЯ КАПСУЛА (Степпер + Результат вместе) */
.modern-calc-badge {
    display: inline-flex;
    align-items: center;
    background-color: #fcfbfa; /* Едва заметный теплый оттенок */
    border: 1px solid #e3dbce; /* Мягкий бежево-золотистый бордюр */
    border-radius: 20px;
    padding: 2px 10px 2px 2px; /* Меньше отступ слева под кнопку, больше справа */
    height: 28px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(184, 144, 71, 0.03);
}

/* Внутренняя группа элементов управления */
.stepper-controls {
    display: flex;
    align-items: center;
}

/* Кнопки - и + в премиум минимализме */
.worker-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e3dbce;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: #776e62;
    padding: 0;
    line-height: 1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(184, 144, 71, 0.05);
}

/* Эффект наведения на кнопку "+" (фирменное золото) */
#workers-plus-btn:hover {
    background-color: #b89047;
    border-color: #b89047;
    color: #fff;
}

/* Эффект наведения на кнопку "-" (приглушенный бордовый) */
#workers-minus-btn:hover {
    background-color: #8c2a1c;
    border-color: #8c2a1c;
    color: #fff;
}

/* Отображение количества человек внутри пилюли */
.workers-count-display {
    color: #4a4238;
    padding: 0 5px;
    font-size: 12px;
    letter-spacing: -0.2px;
    user-select: none;
}

/* Аккуратная вертикальная черта-разделитель внутри капсулы */
.badge-divider {
    width: 1px;
    height: 14px;
    background-color: #e3dbce;
    margin: 0 8px 0 2px;
}

/* Результат расчета дней внутри капсулы */
.badge-result-text {
    font-weight: 700;
    color: #b89047; /* Выделение главным акцентным цветом */
    font-size: 12px;
    letter-spacing: -0.1px;
    white-space: nowrap;
    animation: fadeInDays 0.3s ease-out forwards;
}

/* Анимация плавного появления цифр дней */
@keyframes fadeInDays {
    from { opacity: 0; transform: translateX(-3px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Плавное появление результата при изменении */
@keyframes fadeInDays {
    from { opacity: 0; transform: translateX(-4px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Сама цифра итога - мощный золотой акцент */
.col-sum-total {
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    color: var(--accent);
    font-weight: 900;
    line-height: 1;
    font-family: sans-serif;
}

/* Символ рубля - чуть скромнее числа */
.total-row .currency {
    color: var(--accent);
    font-weight: 700;
    font-size: 1.2rem;
}

/* Примечания */
.notes-container {
    display: none;
    flex-direction: row; /* На ПК в одну строку */
    gap: 15px;
    margin-top: 15px;
    align-items: stretch; /* Чтобы кнопки и текст были одной высоты */
}

.note-item {
    display: flex;
    flex: 1;
    align-items: flex-start;
    /* Отступ между иконкой и текстом: от 8px до 15px */
    gap: clamp(8px, 1.5vw, 15px); 
    background-color: #f8f9fa;
    /* Внутренние отступы блока: от 12px до 20px */
    padding: clamp(12px, 2vw, 20px);
    border-radius: 10px;
    border-top: 5px solid var(--accent);
    border-bottom: 5px solid var(--accent);
    /* Шрифт текста: от 13px до 15px */
    font-size: clamp(8px, 0.8vw, 12px);
    line-height: 1.5;
    color: #555;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.02);
}

/* Улучшенный блок лид-магнита */
.lead-item, .info {
    position: relative;
    overflow: hidden;
    /* Мягкий градиент на фоне, чтобы выделить блок из общей массы */
    background: linear-gradient(135deg, #ffffff 0%, #fcf8f0 100%) !important;
    border: 1px solid rgba(197, 160, 89, 0.3) !important; /* Тонкая золотистая рамка */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Легкая тень для объема */
    transition: var(--transition-base);
}

/* Мощный блик (Shimmer) */
.lead-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100px; /* Фиксированная ширина блика для четкости */
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.9) 50%, /* Почти непрозрачный белый в центре */
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-30deg);
    pointer-events: none;
    /* Анимация: блик пролетает быстрее и чаще */
    animation: lead-shine-v2 3s infinite cubic-bezier(0.4, 0, 0.8, 1);
}

/* Иконка подарка — добавим свечение */
.lead-item .fa-gift, .info .fa-info-circle {
    color: var(--accent) !important;
    filter: drop-shadow(0 0 5px rgba(197, 160, 89, 0.4)); /* Свечение вокруг подарка */
    font-size: 1.4rem; /* Чуть увеличим для веса */
}

.lead-item .fa-gift {
    animation: gift-sway 3s infinite ease-in-out;
}

.fa-spin {
    animation: fa-spin 1s infinite linear;
    display: inline-block; /* Важно для корректного вращения */
}

/* Дополнительный эффект: "дыхание" блока при наведении */
.lead-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.15);
}

/* Кнопки в результате */
.result-actions {
    display: flex;
    margin: 20px 0;
    gap: 15px;
    justify-content: center;
}

.res-btn-tile {
    width: 100%;
    margin: 0;
    min-width: auto;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 16px;
    padding: 16px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    cursor: pointer;
}

.res-btn-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.res-btn-tile:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.res-btn-tile.grey {
    background: linear-gradient(150deg, #fffcf3 0%, #f1f1f1 100%);
    border: 2px solid #aaa;
    color: #555;
}

.res-btn-tile.grey:hover {
    background: #f1f1f1;
    color: #444;
}

.res-btn-tile.gold {
    background: linear-gradient(30deg, #c5a05929 0%, #ffffff 100%);
    border: 2px solid var(--accent);
    color: #856404;
}

.res-btn-tile.gold:hover {
    background: var(--accent);
    color: var(--text-dark);
}

@media (max-width: 880px), (max-height: 500px) and (orientation: landscape) {
    
    .smeta_row {
        box-shadow: inset 4px 0 0 var(--accent);
        transition: order 0.3s ease;
    }
    
    /* Кнопка обратного звонка */
    .notes-container {
        flex-direction: column; /* На мобилках в колонку */
        gap: 15px;
    }

    .note-item {
        flex: none;
        width: 100%;
    }
    
    .lead-item {
        order: -1;
    }
    
    .note-item {
        font-size: clamp(8px, 0.8vw + 7px, 16px);
    }
    
    .result-actions {
        gap: 12px;
        padding: 0 5px;
    }

    .res-btn-tile {
        flex-direction: column !important; /* Иконка строго над текстом */
        min-height: 110px;
        padding: 15px 5px;
        font-size: 11px;
        text-align: center;
        border-radius: 18px; /* Более скругленные для мобилок */
    }

    .res-btn-tile svg {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: 8px;
        margin-right: 0 !important;
    }

    /* Дополнительный лоск для золотой плитки на мобильном */
    .res-btn-tile.gold {
        box-shadow: 0 10px 20px rgba(197, 160, 89, 0.15);
    }
    
    .smeta-row {
        padding: 15px 0 !important;
    }
    
    .smeta-row.total-row {
        align-items: center;
        text-align: center;
        gap: 15px;
        flex-wrap: wrap;
    }
    
    .col-name {
        gap: 6px;
    }
    
    /* Увеличиваем невидимую область клика для удобства пальца */
    .col-delete::after {
        content: '';
        position: absolute;
        width: 44px;
        height: 44px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .col-delete:hover {
        background: transparent;
        color: #ef4444;
    }
}

/* РАЗДЕЛ 11. ОКНА И КНОПКИ */

.cta-button {
    display: inline-flex;
    background: linear-gradient(135deg, var(--accent) 0%, #b38f4d 100%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    color: #fff;
    justify-content: center;
    border: none;
    padding: 1.2rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: var(--transition-bounce);
    text-decoration: none;
}


.click_effect:hover {
    transform: scale(1.03) translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}


.click_effect:active {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) inset;
    transform: translateY(1px); /* Слегка вдавливаем кнопку */
}

.modal {
    /* Вместо display: none */
    opacity: 0;
    visibility: hidden; 
    pointer-events: none; /* Чтобы нельзя было кликнуть сквозь невидимое окно */
    position: fixed; 
    z-index: 10001; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%;
    background-color: rgba(0,0,0,0.7); 
    backdrop-filter: blur(4px);
    display: flex; /* Всегда flex, но скрыт через opacity */
    align-items: center;
    justify-content: center;
    /* Плавность для самого фона (оверлея) */
    transition: opacity 0.4s ease, visibility 0.4s;
}

/* Состояние, когда модалка открыта */
.modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-content {
    background-color: #fff;
    padding: clamp(20px, 5vw, 40px);
    width: 93%; 
    max-width: 670px;
    border-radius: 20px;
    position: relative;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
    
    /* Начальное состояние контента для анимации закрытия */
    transform: scale(0.9) translateY(30px);
    transition: var(--transition-bounce);
}

/* Анимация контента при открытии */
.modal.active .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Заголовки и текст */
#modalTitle {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
    color: #1a1a1a;
    margin-bottom: 12px;
    line-height: 1.2;
}

#modalDesc {
    color: #555;
    font-size: clamp(0.9rem, 3vw, 1rem);
    line-height: 1.6;
    margin-bottom: 20px;
    padding: 0 10px;
}

/* Кнопка закрытия — обновленная версия */
.close-modal {
    position: absolute;
    /* Центрируем крестик ровно на углу */
    right: -15px; 
    top: -15px;
    
    /* Делаем идеальный круг */
    width: 34px;
    height: 34px;
    background-color: #fff;
    border-radius: 50%;
    
    /* Центрируем сам символ × внутри круга */
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 20px;
    cursor: pointer;
    color: #888;
    line-height: 1;
    
    /* Тень, чтобы крестик был виден над темным фоном модалки */
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    z-index: 10;
    transition: var(--transition-standard);
    border: 1px solid #eee; /* Тонкая кайма для четкости */
}

.close-modal:hover {
    color: var(--accent-gold);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Центрирование надписи над чекбоксом в мобильной версии */
@media (max-width: 880px) {
    .privacy-container {
        font-size: 0.75rem;
        flex-wrap: wrap;
    }
    
    .close-modal {
        right: -10px;
        top: -10px;
        width: 38px;
        height: 38px;
        font-size: 24px;
    }
    .modal-content {
        padding: 25px 15px;
        margin: 10px;
    }
}

/* РАЗДЕЛ 12. ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ */
.privacy-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 15px 0 10px 0;
    font-size: 0.7rem; /* Чуть уменьшим шрифт для компактности */
    color: #888;
    text-align: left; /* Текст влево */
}

.privacy-container label {
    cursor: pointer;
    color: inherit;
    line-height: 1.2; /* Устанавливаем четкую высоту строки */
}

.privacy-container input[type="checkbox"] {
    flex-shrink: 0; /* Чтобы чекбокс никогда не сжимался */
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--accent);
    margin: 0;
    transform: translateY(-2px);
}

.privacy-container a {
    color: var(--accent);
    text-decoration: underline;
    transition: opacity 0.3s;
}

.privacy-container a:hover {
    opacity: 0.8;
}

/* Анимация встряски */
@keyframes shake-error {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Класс ошибки для контейнера политики */
.privacy-container.error {
    animation: shake-error 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

/* Подсветка текста и кастомный фокус на чекбокс */
.privacy-container.error label {
    color: #ff4d4d; /* Мягкий красный */
    text-shadow: 0 0 5px rgba(255, 77, 77, 0.3);
    transition: color 0.3s ease;
}

.privacy-container.error input[type="checkbox"] {
    outline: 2px solid #ff4d4d;
    outline-offset: 3px;
    box-shadow: 0 0 10px rgba(255, 77, 77, 0.5);
}

/* РАЗДЕЛ 13. ИКОНКИ СОЦСЕТЕЙ */
.share-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(10px, 2vw, 20px); 
    background: #fdfdfd;
    padding: clamp(12px, 2vw, 20px);
    border-radius: 12px;
    border: 1px solid #eee;
    margin-top: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

/* Разделительная линия */
.share-separator {
    width: 1px;
    height: 30px;
    background: #e0e0e0;
}

/* Текст "Поделиться этим расчетом" */
.share-label {
    /* Плавный шрифт от 11px до 13px */
    font-size: clamp(9px, 1.5vw, 13px);
    color: #888;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.2;
    max-width: min-content;
}

/* Контейнер иконок соцсетей */
.social-icons-group {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2.5vw, 20px);
}

/* Общие стили для иконок FontAwesome */
.s-icon-fa {
    /* Размер иконок плавно от 22px до 28px */
    font-size: clamp(22px, 2vw + 16px, 28px);
    text-decoration: none;
    transition: var(--transition-bounce);
}

/* Брендовые цвета иконок */
.s-icon-fa.max { color: #667eea; }
.s-icon-fa.tg { color: #229ED9; }
.s-icon-fa.wa { color: #25D366; }
.s-icon-fa.vk { color: #4C75A3; }

.s-icon-fa:hover {
    transform: scale(1.15) translateY(-3px);
    opacity: 0.8;
}

/* --- АДАПТИВНОСТЬ (МОБИЛЬНЫЕ УСТРОЙСТВА) --- */

@media (max-width: 980px), (max-height: 500px) and (orientation: landscape) {
    .share-actions-row {
        flex-direction: column; /* Элементы встают друг под друга */
        padding: 20px;
        gap: 15px;
    }

    .share-separator {
        display: none; /* Убираем вертикальную черту в мобильной версии */
    }

    .share-label {
        width: 100%;
        text-align: center;
        margin-top: 5px;
        order: 2; /* Текст "Поделиться" идет вторым */
    }

    .social-icons-group {
        width: 100%;
        justify-content: center;
        order: 3; /* Иконки соцсетей в самом низу */
        padding-top: 10px;
        border-top: 1px solid #eee; /* Легкая черта для отделения соцсетей */
    }
}

/* РАЗДЕЛ 14. МОДАЛЬНОЕ ОКНО ВЫБОРА РЕЖИМА СМЕТЫ */
.smeta-choice-modal {
    display: none; /* Управляется через JS (flex) */
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px); /* Легкое размытие фона */
    z-index: 10000;
    animation: fadeIn 0.3s ease-out;
}

.smeta-choice-content {
    background: #1a1a1a;
    padding: 40px 30px;
    border: 1px solid #c5a059;
    border-radius: 12px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    transform: scale(1);
    animation: scaleUp 0.3s ease-out;
}

.smeta-choice-content h3 {
    color: #c5a059;
    margin-bottom: 15px;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.smeta-choice-content p {
    color: #efefef;
    margin-bottom: 30px;
    line-height: 1.6;
    font-size: 16px;
}

.modal-btn-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btn-modal {
    padding: 15px 20px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: var(--transition-base);
    text-transform: uppercase;
    transition: var(--transition-bounce);
}

/* Кнопка "Исправить" */
.btn-modal-gold {
    background: #c5a059;
    color: #000;
    border: none;
    transition: var(--transition-bounce);
}

.btn-modal-gold:hover {
    background: #e2ba6f;
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.4);
}

/* Кнопка "Очистить" */
.btn-modal-outline {
    background: transparent;
    color: #c5a059;
    border: 1px solid #c5a059;
}

.btn-modal-outline:hover {
    background: rgba(197, 160, 89, 0.1);
    color: #fff;
    border-color: #fff;
}

/* РАЗДЕЛ 15. ССЫЛКИ */
a {
    color: var(--accent);
}

.lm-icon-mini {
    margin-left: 5px;
    opacity: 0.6; /* Чуть сильнее приглушим в покое для контраста */
    transition: var(--transition-bounce);
    vertical-align: middle; /* Часто смотрится лучше baseline для иконок */
    flex-shrink: 0;
    display: inline-block; /* Важно для корректного transform */
}

.btn-lm {
    text-decoration: none;
    border-bottom: 1px dashed var(--accent);
    padding-bottom: 2px;
    transition: var(--transition-bounce);
    display: inline-flex;
    align-items: center;
}

/* Эффект при наведении */
.btn-lm:hover {
    color: var(--accent); /* Убедимся, что цвет яркий */
    border-bottom-style: solid; /* Делаем линию сплошной при наведении */
}

.btn-lm:hover .lm-icon-mini {
    /* Смещение + легкое увеличение */
    transform: translateX(5px) scale(1.1); 
    opacity: 1;
}

/* Эффект "нажатия" (Active) — для тактильности */
.btn-lm:active .lm-icon-mini {
    transform: translateX(2px) scale(0.95);
}

/* РАЗДЕЛ 16. ИСТОРИЯ СМЕТ */
.old-estimates-box {
    margin: 25px 0;
    padding: 15px;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 12px;
}
.old-estimates-header {
    font-size: clamp(0.75rem, 0.8vw, 0.875rem);
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}
.old-estimates-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.old-estimate-wrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin-right: 10px;
    margin-bottom: 8px;
}

.old-sum {
    display: inline-flex;
}

/* Кнопка удаления */
.delete-est-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-left: none; /* Соединяем с основной кнопкой */
    color: #ccc;
    font-size: 18px;
    padding: 0 10px;
    height: 100%; /* Растягиваем на всю высоту соседа */
    cursor: pointer;
    border-radius: 0 8px 8px 0; /* Скругляем правые углы */
    transition: var(--transition-bounce);
}

.delete-est-btn:hover {
    background: #ffeded;
    color: #e74c3c;
    border-color: #ffcccc;
}

/* Подсветка текущей активной сметы */
.old-estimate-item.active {
    background: #f9f6f0;
    border-color: #c5a059;
    pointer-events: none; /* Нельзя кликнуть на саму себя */
    border-radius: 8px; /* Возвращаем углы, так как кнопки удаления нет */
}
.old-estimate-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px 0 0 8px;
    text-decoration: none;
    color: #777;
    gap: 5px;
    font-size: clamp(0.75rem, 0.8vw, 0.875rem);
    transition: var(--transition-bounce);
}
.old-estimate-item:hover {
    border-color: #c5a059;
    box-shadow: 0 4px 10px rgba(197, 160, 89, 0.1);
}
.old-estimate-item i { font-size: 0.7rem; color: #ccc; }

.mini-eye {
    font-size: 0.7rem;
    color: #916a00;
    margin-left: 5px;
    opacity: 0.6;
}

.old-estimate-item:hover .mini-eye {
    opacity: 1;
}

/* Сделаем обертку относительной для позиционирования будущих кастомных тултипов */
.old-estimate-wrapper {
    position: relative;
    cursor: help; /* Курсор в виде знака вопроса с подсказкой */
}

.old-estimate-item.active {
    cursor: default;
}

/* РАЗДЕЛ 16. ГАЙД */
/* Превью Гайда */
.guide-preview-container {
    background: linear-gradient(145deg, #fefefe 0%, #f0f0f0 100%);
    border-radius: 15px;
    padding: 35px 20px;
    margin-bottom: 25px;
    position: relative;
    border: 2px dashed var(--accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: var(--transition-bounce);
}

.pdf-icon-wrapper {
    position: relative;
    margin-bottom: 15px;
    animation: pdf-pulse 2s infinite ease-in-out;
}

.pdf-large-icon {
    font-size: clamp(50px, 15vw, 80px);
    color: var(--accent);
    filter: drop-shadow(0 10px 15px rgba(197, 160, 89, 0.2));
}

.pdf-size-tag {
    position: absolute;
    bottom: -5px;
    right: -10px;
    background: #333;
    color: #fff;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 600;
}

.guide-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--accent);
    color: #fff;
    font-size: clamp(9px, 2vw, 11px);
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.guide-mockup-title {
    font-size: clamp(14px, 4vw, 17px);
    font-weight: 700;
    color: #2c3e50;
    max-width: 80%;
    line-height: 1.3;
}

/* Кнопка скачивания */
.download-guide-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    background: var(--accent);
    color: #fff;
    padding: clamp(15px, 4vw, 20px);
    font-size: clamp(16px, 4vw, 19px);
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    border: none;
    box-shadow: 0 10px 25px rgba(197, 160, 89, 0.35);
    margin-top: 10px;
}

.download-guide-btn:hover {
    background: var(--text-dark);
}

/* Эффект реалистичной обложки */
.guide-cover-wrapper {
    position: relative;
    margin-bottom: 20px;
    perspective: 1000px; /* Для 3D эффекта */
    transition: var(--transition-standard);
}

.guide-cover-img {
    width: clamp(65px, 20vw, 160px); /* Адаптивный размер */
    height: auto;
    border-radius: 4px 12px 12px 4px; /* Имитация корешка книги */
    box-shadow: 
        -5px 5px 15px rgba(0,0,0,0.2), 
        0 0 2px rgba(0,0,0,0.1);
    transform: rotateY(-10deg) rotateX(5deg); /* Слегка разворачиваем к пользователю */
    transition: var(--transition-bounce);
    display: block;
}

.guide-preview-container:hover .guide-cover-img {
    transform: rotateY(0deg) rotateX(0deg) scale(1.05); /* Выпрямляется при наведении */
}

/* Корешок книги (блик) */
.guide-cover-wrapper::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.2) 50%, 
        rgba(0,0,0,0.1) 100%);
    z-index: 2;
    border-radius: 4px 0 0 4px;
}

.pdf-size-tag {
    position: absolute;
    bottom: 5px;
    right: -15px;
    background: #27ae60; /* Зеленый цвет для "безопасного" размера */
    color: #fff;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.trust-line {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.trust-item {
    font-size: 11px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
}

.messenger-line {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #888;
}

.messenger-item {
    display: flex;
    align-items: center;
    gap: 6px;
}


/* Адаптивность для маленьких экранов */
@media (max-width: 880px), (max-height: 500px) and (orientation: landscape) {
    .guide-preview-container {
        padding: 25px 10px;
    }
    
    .messenger-span {
        display: none;
    }
}

/* ==================== ВЕДОМОСТЬ МАТЕРИАЛОВ v01 ==================== */

.materials-result-box {
    max-width: 900px;
    margin: 40px auto 0 auto; /* Оставили строго ваш вариант */
    background: #fdfaf3;
    border: 1px solid #d4af37;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.10);
    font-size: 0.85rem; /* Сделали общий шрифт ведомости чуть мельче */
}

.materials-result-box h3 {
    margin: 0 0 16px 0;
    color: #b8860b;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.3px;
}

/* Список и ячейки */
.materials-header, .material-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0e6d2;
}
.materials-header { border-bottom: 2px solid #d4af37; font-size: 0.75rem; color: #b8860b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; }
.material-line:last-child { border-bottom: none; }

.mat-main { display: flex; align-items: center; flex: 1; min-width: 0; }
.mat-text-block { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mat-name { color: #2c3e50; font-size: 0.85rem; word-break: break-word; }
.mat-notes { font-size: 0.78rem; color: #777; margin-top: 2px; }

/* Колонки на десктопе */
.mat-col-name { flex: 1; }
.mat-col-qty, .mat-qty { width: 120px; text-align: right; }
.mat-col-cost, .mat-cost { width: 110px; text-align: right; }
/* Контейнер цифр на десктопе */
.mat-meta { display: flex; align-items: center; }
.mat-qty { width: 120px; text-align: right; color: #777; font-family: sans-serif; padding-right: 10px; }
.mat-cost { width: 110px; text-align: right; font-weight: 700; color: #b8860b; }
.product-link { display: inline-flex; align-items: center; margin-left: 6px; color: #b8860b; opacity: 0.75; }
/* Нижняя часть */
.materials-footer { padding-top: 16px; border-top: 1px solid #e8d9b8; margin-top: 10px; }
.materials-total { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 1rem; }
.materials-total strong { color: #555; font-weight: 600; }
.total-mat-cost { font-weight: 700; color: #b8860b; font-size: 1.2rem; }

.button-wrapper { display: flex; justify-content: flex-end; }
.btn-order-materials {
    min-width: 260px; padding: 12px 28px; color: #fff; border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 600; text-transform: uppercase; cursor: pointer; letter-spacing: 0.3px;
    background: linear-gradient(135deg, #d4af37, #b8860b); box-shadow: 0 4px 12px rgba(184, 134, 11, 0.25); transition: all 0.2s ease;
}
.btn-order-materials:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(184, 134, 11, 0.35); }
.btn-order-materials:active { transform: translateY(1px); }
.materials-notice { display: block; color: #888; font-size: 0.78rem; text-align: right; margin-top: 8px; line-height: 1.4; }
.product-link { display: inline-flex; align-items: center; margin-left: 6px; color: #b8860b; opacity: 0.75; }

/* Меню "От заказчика" */
.material-menu { background: #fff; border: 1px solid #d4af37; border-radius: 8px; box-shadow: 0 6px 15px rgba(184, 134, 11, 0.15); position: absolute; z-index: 1000; min-width: 160px; padding: 4px 0; font-size: 0.88rem; }
.menu-item { padding: 8px 14px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; color: #2c3e50; }
.menu-item:hover { background: #fdf8eb; color: #b8860b; }
.menu-item.active { background: #f8f0d9; font-weight: 600; color: #b8860b; }
.mat-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 16px; color: #b8860b; cursor: pointer; border-radius: 50%; flex-shrink: 0; margin-right: 6px; }
.mat-menu-btn:hover { background: rgba(184, 134, 11, 0.1); }
.customer-note { color: #e67e22; font-size: 0.85em; }

/* ==================== ЭЛЕГАНТНЫЙ МОБИЛЬНЫЙ БЛОК ==================== */
@media screen and (min-width: 769px) { .mat-meta .product-link { display: none; } }

/* ==================== ОБНОВЛЕННЫЙ МОБИЛЬНЫЙ БЛОК C КАРТОЧКАМИ ==================== */
@media screen and (max-width: 768px) {
    .desktop-only-link { display: none; }
    .materials-result-box { padding: 20px 12px; margin: 40px auto 0 auto; }
    .materials-header { display: none; }
    
    /* Каждая строка теперь — красивая отдельная карточка */
    .material-line { 
        display: flex;
        flex-direction: column;
        align-items: stretch; 
        gap: 12px; 
        
        /* Заменили padding строки на margin, как вы просили */
        margin: 0 0 14px 0; 
        padding: 14px; /* Внутренние отступы, чтобы контент не прилипал к краям карточки */
        
        /* Элегантный легкий фон и скругление */
        background: #ffffff;
        border: 1px solid #f2e9d7;
        border-radius: 12px;
        box-shadow: 0 3px 8px rgba(184, 134, 11, 0.04);
    }
    .material-line:last-child { 
        margin-bottom: 20px; /* Отступ перед итоговой строкой */
        border-bottom: 1px solid #f2e9d7; /* Сбрасываем десктопное скрытие границы */
    }

    /* Выравнивание меню ⋮ и названия */
    .mat-main { 
        display: flex;
        align-items: flex-start;
        width: 100%; 
    }
    
    .mat-menu-btn {
        margin-top: 1px;
    }

    .mat-name {
        display: block;
        font-weight: 600;
        line-height: 1.4;
        color: #2c3e50;
    }
    
    /* Скрываем дубликат ссылки из названия */
    .mat-name .product-link {
        display: none;
    }

    /* Мета-блок с цифрами на контрастной подложке */
    .mat-meta { 
        display: flex; 
        justify-content: flex-end; 
        align-items: center; 
        gap: 10px; 
        width: 100%; 
        font-size: clamp(0.8em, 2vw, 0.9em);
        background: #fdfaf3; /* Чуть более теплый оттенок для контраста с белой карточкой */
        padding: 8px 12px;
        border-radius: 8px;
        box-sizing: border-box;
        border: 1px solid #f5ebd5;
    }
    
    .mat-qty { 
        width: auto; 
        text-align: right; 
        padding: 0; 
        color: #666;
    }
    
    /* Изящная стрелочка-указатель */
    .mat-qty::after { 
        content: "⟶"; 
        color: #d4af37; 
        margin-left: 10px;
        opacity: 0.7;
    }
    
    .mat-cost { 
        width: auto;
        text-align: right; 
        font-weight: 700;
        color: #b8860b;
    }
    
    .mat-cost span {
        display: inline-block;
        margin-left: 4px;
    }

    /* Ссылка на товар в конце строки мета-данных */
    .material-line .product-link {
        position: static;
        display: inline-flex;
        align-items: center;
        margin: 0 0 0 2px;
        color: #b8860b;
        opacity: 0.8;
    }

    /* Ниже без изменений — общие блоки */
    .materials-total { justify-content: space-between; padding: 10px 4px; }
    .btn-order-materials { width: 100%; min-width: 0; padding: 14px; }
    .materials-notice { text-align: center; }
}

/* ===================================== АНИМАЦИИ============================ */
.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

@keyframes deleteHint {
    0% { transform: scale(1); color: #d1d5db; }
    50% { transform: scale(1.2); color: #ef4444; }
    100% { transform: scale(1); color: #9ca3af; }
}

@keyframes goldPulse {
    0% { 
        box-shadow: inset 0 0 0 0 rgba(197, 160, 89, 0);
        border-color: rgba(197, 160, 89, 0.3);
    }
    50% { 
        /* Мягкое золотое свечение наружу */
        box-shadow: inset 0 0 15px 2px rgba(197, 160, 89, 0.3);
        border-color: rgba(197, 160, 89, 0.8);
    }
    100% { 
        box-shadow: inset 0 0 0 0 rgba(197, 160, 89, 0);
        border-color: rgba(197, 160, 89, 0.3);
    }
}

@keyframes quickShake {
    0%, 100% { transform: translateX(0); }
    5%, 15%, 25% { transform: translateX(-5px); } /* Смещение влево */
    10%, 20%, 30% { transform: translateX(5px); }  /* Смещение вправо */
    35% { transform: translateX(0); }              /* Возврат в покой */
}

@keyframes createEstimate {
    0%, 100% { transform: translateY(0); }
    20%, 60% { transform: translateY(1px); }
    40%, 80% { transform: translateY(0px); }
}

@keyframes bounceAndPulse {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 3px 10px rgba(0,0,0,0.5), 0 0 7px rgba(255, 204, 0, 0.2);
    }
    50% {
        transform: translateY(-12px); /* Прыжок всей конструкции */
        box-shadow: 0 7px 25px rgba(0,0,0,0.7), 0 0 15px rgba(255, 204, 0, 0.5);
    }
}

@keyframes hi_search {
    0% {
        transform: scale(1);
        box-shadow: none;
    }
    20% {
        transform: scale(1.02); /* Легкое расширение */
        box-shadow: 0 0 15px rgba(197, 160, 89, 0.3); /* Золотистое свечение (accent) */
        border-color: var(--accent);
    }
    50% {
        transform: scale(1.01);
        box-shadow: 0 0 20px rgba(197, 160, 89, 0.5);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 5px rgba(197, 160, 89, 0.2);
        border-color: var(--accent);
    }
}

@keyframes lead-shine-v2 {
    0% { left: -150%; }
    50% { left: 150%; }
    100% { left: 150%; }
}

@keyframes gift-sway {
    0%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(10deg); }
    20%, 40% { transform: rotate(-10deg); }
    50% { transform: rotate(0deg); }
}

@keyframes fa-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes shake-error {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

@keyframes scaleUp {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes pdf-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(-10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

@keyframes arrow-nudge {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-5px); } /* Толчок влево */
    40%      { transform: translateX(2px); }  /* Мягкий откат вправо */
    60%      { transform: translateX(-3px); } /* Снова влево, но слабее */
    80%      { transform: translateX(1px); }
}