/* ==========================================================================
   ✨ ТИПОГРАФИКА И БАЗОВЫЕ НАСТРОЙКИ (INTER)
   ========================================================================== */
body, html, button, input, select, textarea, .form-control, .form-select {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Делаем цифры моноширинными (чтобы не прыгали при изменении значений) */
.badge, .calc-numbers, span, div {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   🎨 ПАЛИТРА ДЛЯ LOGICALC "DOLLAR WHITE" + ГЛОБАЛЬНЫЙ GLASSMORPHISM
   ========================================================================== */
:root {
    --bg-main: #f5f3e7;        /* Мягкий бумажный фон */
    --panel-bg: rgba(236, 236, 226, 0.7); /* Матовое стекло для панелей */
    --accent-color: #dce3c5;   /* Фирменный приглушенный лайм */
    --border-color: rgba(209, 207, 197, 0.5); /* Полупрозрачные границы */
    --text-color: #4a4a44;     /* Глубокий серый цвет */
}

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    min-height: 100%;
    overflow-x: clip;

    background-color: var(--bg-main) !important;
    background-image:
        radial-gradient(at 0% 0%, rgba(226, 229, 204, 0.6) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(255, 255, 255, 0.9) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(220, 227, 197, 0.5) 0px, transparent 50%) !important;
    background-attachment: fixed !important;
    color: var(--text-color) !important;
}
html {
    overflow-x: clip;
}

#app {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    min-height: 100vh;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: var(--text-color) !important;
    background-color: var(--accent-color) !important;
    border-color: var(--border-color) !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--bg-main), 0 0 0 0.25rem var(--accent-color) !important;
}


/* ==========================================================================
   💎 ПРЕМИАЛЬНАЯ НАВИГАЦИЯ (ЧИСТЫЙ ТЕКСТ БЕЗ КОНТУРА)
   ========================================================================== */
.apple-btn {
    background: transparent !important; /* Полностью убираем фон */
    border: 1px solid transparent !important; /* Убираем видимый контур */
    color: var(--text-color) !important;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden; 
}

/* Оставляем красивый стеклянный блик при наведении */
.apple-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: none;
}

/* При наведении мышки появляется мягкая, едва заметная подложка (как в меню Mac) */
.apple-btn:hover {
    background: rgba(0, 0, 0, 0.04) !important; /* Очень нежное затемнение */
    color: #000 !important; /* Текст становится чуть контрастнее */
}

.apple-btn:hover::after {
    left: 150%;
    transition: all 0.6s ease-in-out;
}

.click-anim:active {
    transform: scale(0.96);
}

/* ==========================================================================
   🚀 УМНЫЙ ХОВЕР-САЙДБАР (ВЫЕЗЖАЕТ ПРИ НАВЕДЕНИИ)
   ========================================================================== */
.sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    height: 100vh;
    width: 250px !important;
    transform: translateX(-240px); 
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out !important;
    z-index: 9999 !important; 
}

.sidebar, .nav-scrollable {
    background-color: #ecece2 !important; /* Оставляем плотным, чтобы карта не просвечивала сквозь текст меню */
}

.sidebar:hover {
    transform: translateX(0);
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.2); 
}

/* Коррекция основного интерфейса */
.page {
    display: block !important;
    width: 100% !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
}

main,
.main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   🌍 ФИКСЫ ДЛЯ КАРТЫ LEAFLET
   ========================================================================== */
#map {
    position: relative !important;
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
    width: 100%;
    border-radius: 12px;
    margin-bottom: 20px;
    z-index: 1 !important;
    isolation: isolate !important; 
    filter: sepia(15%) saturate(85%) hue-rotate(35deg) brightness(1.02);
}

.leaflet-top, .leaflet-bottom, .leaflet-control {
    z-index: 10 !important;
}

.leaflet-container, .leaflet-pane {
    z-index: 1 !important;
}

.offcanvas, .offcanvas-backdrop {
    z-index: 10000 !important; 
}

/* ==========================================================================
   🛡️ СТИЛЬНАЯ СТЕКЛЯННАЯ ШАПКА (STICKY HEADER)
   ========================================================================== */
.top-row {
    position: sticky !important;
    top: 0 !important;
    z-index: 9998 !important; 
    padding-left: 20px !important;
    justify-content: flex-end !important;
    background: rgba(236, 236, 226, 0.6) !important; /* Полупрозрачный фон */
    backdrop-filter: blur(12px) !important; /* Эффект размытия Apple */
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}



/* Валидация */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }
/* ==========================================================================
   🚀 ГЛОБАЛЬНАЯ АНИМАЦИЯ ДЛЯ ВСЕХ КНОПОК САЙТА
   ========================================================================== */

/* Подготавливаем все стандартные кнопки к анимации */
.btn {
    position: relative;
    overflow: hidden; /* Чтобы блик не вылетал за края кнопки */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Создаем невидимый световой луч (блик) для каждой кнопки */
.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    /* Более плотный блик, так как рабочие кнопки у нас цветные */
    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: skewX(-25deg);
    transition: none;
}

/* При наведении мышки блик пролетает слева направо */
.btn:hover::after {
    left: 150%;
    transition: all 0.6s ease-in-out;
}

/* Эффект парения для кнопок: они чуть приподнимаются и отбрасывают мягкую тень */
.btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    filter: brightness(1.02);
}

/* Физика нажатия (кнопка слегка вдавливается) */
.btn:not(:disabled):active {
    transform: scale(0.97) translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Для заблокированной кнопки (когда крутится лоадер расчета) убираем анимации */
.btn:disabled {
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.8;
}
/* ==========================================================================
   ✨ УНИВЕРСАЛЬНЫЙ КЛАСС ДЛЯ СТЕКЛЯННОГО БЛИКА (ДЛЯ ЛЮБЫХ КНОПОК)
   ========================================================================== */
.glass-btn {
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    /* Убеждаемся, что блик не перекрывается фоном кнопки */
    z-index: 1; 
}

.glass-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: none;
    z-index: 2; /* Блик идет поверх фона, но под текстом */
    pointer-events: none; /* Чтобы блик не мешал кликать */
}

.glass-btn:hover::after {
    left: 150%;
    transition: all 0.65s ease-in-out;
}

.glass-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    filter: brightness(1.05);
}

.glass-btn:active {
    transform: scale(0.95) translateY(0) !important;
}
/* ==========================================================================
   🪟 ГЛОБАЛЬНЫЕ СТЕКЛЯННЫЕ ПАНЕЛИ (GLASSMORPHISM)
   ========================================================================== */
.glass-panel {
    background: rgba(255, 255, 255, 0.45) !important; /* Полупрозрачная белая подложка */
    backdrop-filter: blur(16px) !important;           /* Глубокое размытие фона */
    -webkit-backdrop-filter: blur(16px) !important;
    /* Делаем рамку чуть светлее, чтобы подчеркнуть край стекла */
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    /* Многослойная тень: резкая + мягкая рассеянная */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02), 0 16px 40px rgba(0, 0, 0, 0.05) !important;
    border-radius: 16px !important;                   /* Аккуратные закругления */
    transition: all 0.3s ease-in-out;
}

/* Эффект "дыхания" панели при наведении курсора */
.glass-panel:hover {
    background: rgba(255, 255, 255, 0.55) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}
/* ==========================================================================
   🪟 ВНУТРЕННИЕ ЭЛЕМЕНТЫ (КАРТОЧКИ ТОЧЕК И БАЗЫ)
   ========================================================================== */
.glass-sub-panel {
    background: rgba(255, 255, 255, 0.35) !important; /* Более прозрачный, чем главная панель */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

/* 📝 СТЕКЛЯННЫЕ ПОЛЯ ВВОДА (ИНПУТЫ) */
.glass-input {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(209, 207, 197, 0.6) !important;
    color: var(--text-color) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease-in-out;
}

.glass-input:focus {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(220, 227, 197, 0.5) !important;
}
/* ==========================================================================
   🟩 ФИРМЕННЫЕ КНОПКИ (В СТИЛЕ "DOLLAR WHITE")
   ========================================================================== */
.btn-brand {
    background-color: #E2E5CC !important; /* Спокойный фисташковый, как у главной кнопки */
    color: #4a4a44 !important;            /* Темно-серый текст для читаемости */
    border: 1px solid #DCE3C5 !important;
    white-space: nowrap !important;       /* ЗАПРЕЩАЕМ ПЕРЕНОС ТЕКСТА (чтобы не были толстыми) */
    padding-left: 12px !important;        /* Делаем кнопку шире */
    padding-right: 12px !important;
    font-weight: 600 !important;
}

.btn-brand:hover {
    background-color: #d8dbbf !important;
    color: #4a4a44 !important;
}
/* ==========================================================================
   🔒 ЗАЩИТА ЦВЕТА ТЕКСТА ОТ ИЗМЕНЕНИЙ ПРИ НАВЕДЕНИИ
   ========================================================================== */
/* Для темной кнопки PDF текст всегда строго белый */
.btn-pdf:hover, .btn-pdf:hover span {
    color: #ffffff !important;
}

/* Для светлых кнопок (Save, Copy, Brand) текст всегда строго фирменный серый */
.btn-save:hover, .btn-save:hover span,
.btn-copy:hover, .btn-copy:hover span,
.btn-brand:hover, .btn-brand:hover span {
    color: #4a4a44 !important;
}
/* ==========================================================================
   🌫️ ВЫПАДАЮЩИЕ МЕНЮ (ПЛОТНОЕ МАТОВОЕ СТЕКЛО)
   ========================================================================== */
.glass-dropdown {
    /* Подняли заливку до 85% (было 25%). Теперь меню плотное, но слегка просвечивает */
    background: rgba(255, 255, 255, 0.85) !important; 
    backdrop-filter: blur(24px) !important;           
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 16px !important;
    /* Сделали тень чуть гуще, чтобы меню визуально "оторвалось" от нижнего слоя */
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important; 
}
.ai-modal-glass {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.btn-gemini-ai {
    background-color: #F3E8FF; 
    border: 2px solid #E9D5FF; 
    border-radius: 50px; 
    padding: 6px 20px; /* Уменьшили цифру 8px до 6px, чтобы сделать 'уже' */
    cursor: pointer;
    display: flex; /* Поменяли на flex для работы с шириной */
    width: 100%; /* Растягиваем на всю ширину родителя */
    align-items: center;
    justify-content: flex-start; /* Прижимаем контент (звездочки и текст) к левому краю */
    gap: 12px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Эффект при наведении */
.btn-gemini-ai:hover {
    background-color: #E9D5FF;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.08);
}

/* Размер звездочек */
.ai-stars {
    font-size: 1.2rem;
}

/* Магия градиента для текста */
.ai-btn-text {
    font-weight: 800;
    font-size: 1rem;
    /* Переход от сине-фиолетового к розовому */
    background: linear-gradient(90deg, #7C3AED, #DB2777); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Фолбек для старых браузеров */
}
/* Стиль для блеклого призывного текста */
.ai-hint-text {
    color: #9CA3AF;
    font-weight: 400;
    font-size: 0.9rem;
    white-space: normal; /* Разрешаем тексту переноситься */
    text-align: left; /* Чтобы при переносе он красиво выравнивался */
    line-height: 1.2;
}

/* МАГИЯ: Состояние кнопки, когда она раскрылась */
.btn-gemini-ai.expanded-glass {
    flex-direction: column; /* Элементы идут сверху вниз, а не в ряд */
    align-items: flex-start;
    background: rgba(243, 232, 255, 0.65); /* Тот самый фиолетовый оттенок с прозрачностью */
    backdrop-filter: blur(12px); /* Эффект матового стекла */
    -webkit-backdrop-filter: blur(12px); /* Для Safari */
    border: 1px solid rgba(219, 39, 119, 0.2); /* Легкая розоватая рамка для контраста */
    border-radius: 16px; /* Чуть менее круглые края для большого окна */
    padding: 12px 20px;
    cursor: default; /* Меняем курсор, чтобы текст внутри можно было выделять */
}

/* Контейнер для самого текста от AI */
.ai-response-content {
    width: 100%;
    text-align: left;
    color: #4a4a44;
    font-size: 0.95rem;
    line-height: 1.5;
    border-top: 1px solid rgba(124, 58, 237, 0.2); /* Тонкая линия-разделитель */
    padding-top: 12px;
    cursor: text; /* Чтобы текст можно было копировать */
}
.close-x-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    font-weight: 300;
    color: #4a4a44;
    cursor: pointer;
    line-height: 1;
    padding: 2px 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-x-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: #000;
}

/* =========================================================
   BLOG / FAQ / PRIVACY — LANGUAGE ACTIONS
========================================================= */

.logiccalc-info-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.logiccalc-info-language {
    width: auto !important;
    min-width: 118px;
    max-width: 138px;
    min-height: 40px;

    padding-left: 13px !important;
    padding-right: 32px !important;

    border: 1px solid rgba(72, 78, 67, 0.10) !important;
    border-radius: 999px !important;

    color: #555c50 !important;
    background-color: rgba(255, 255, 255, 0.82) !important;

    font-size: 0.82rem !important;
    font-weight: 750 !important;

    box-shadow: 0 5px 16px rgba(52, 60, 47, 0.045) !important;
    cursor: pointer;
}

.logiccalc-info-language:focus,
.logiccalc-info-language:focus-visible {
    outline: none !important;
    border-color: rgba(91, 112, 80, 0.28) !important;
    box-shadow: 0 0 0 3px rgba(91, 112, 80, 0.10) !important;
}

@media (max-width: 600px) {
    .logiccalc-info-actions {
        gap: 7px;
    }

    .logiccalc-info-language {
        min-width: 105px;
        max-width: 115px;
        padding-left: 10px !important;
        font-size: 0.76rem !important;
    }
}