/* 1. Основен контейнер - Вече не е Grid на десктоп, а вертикален Flex */
.fm-wrapper .fm-map-viewport {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
    max-width: 1140px; 
    margin: 0 auto 40px auto;
    height: auto !important; /* Важно за десктоп */
    position: relative;
}

/* 2. Картата - Разпъната на 100% ширина */
.fm-wrapper #fm-map {
    width: 100% !important;
    height: 600px !important; /* Височина на десктоп */
    border-radius: 15px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}

/* 3. Инфо панелът - под картата */
.fm-wrapper #fm-details-panel {
    display: none; /* Скрит по подразбиране */
    width: 100% !important;
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    border: 1px solid #eee;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.fm-wrapper #fm-details-panel.active {
    display: block !important;
}

/* 4. Трите колони вътре в инфо-блока (САМО ЗА ДЕСКТОП) */
@media (min-width: 1025px) {
    #fm-details-content {
        display: grid !important;
        grid-template-columns: 1fr 1fr 0.8fr !important; /* Снимка | Текст | Контакти */
        gap: 30px;
        align-items: start;
    }

    .fm-detail-img {
        height: 500px !important; /* Увеличаваме реалната височина */
        width: 100% !important;   /* Запълва колоната си */
        max-height: none !important; /* Премахваме старото ограничение */
        object-fit: cover !important; /* Запълва красиво пространството */
        margin-bottom: 0 !important;
        display: block !important;
    }

    .fm-info-column {
        text-align: left;
    }

    .fm-detail-title { text-align: left !important; margin-top: 0 !important; }
    .fm-detail-desc { text-align: left !important; }

    .fm-contact-grid {
        border-top: none !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        align-items: flex-start !important;
    }
}

/* 5. Запазване на мобилния изглед (Mobile Reset) */
@media (max-width: 1024px) {
    .fm-wrapper #fm-map {
        height: 400px !important;
    }
    
    #fm-details-content {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Твоите досегашни мобилни стилове тук... */
}

/* ==============================
    MOBILE & RESPONSIVE
============================== */
@media (max-width: 1024px) {
    .fm-wrapper .fm-categories-row { 
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important; 
    }
    
    .fm-wrapper .fm-cat-btn { 
        width: 100% !important; 
        max-width: 300px !important; 
        margin-bottom: 10px !important;
    }

    .fm-wrapper .fm-subcategories-box { 
        display: block !important; 
        width: 100% !important;
        padding: 0 2px !important; 
    }

    .fm-wrapper .fm-sub-item { 
        display: flex !important;    
        width: 100% !important;      
        max-width: 320px !important; 
        margin: 0 auto 10px auto !important; 
        padding: 12px 15px !important;
        justify-content: flex-start !important;
    }

    .fm-wrapper .fm-map-viewport { 
        display: flex !important; 
        flex-direction: column !important; 
        height: auto !important; 
    }

    .fm-wrapper #fm-details-panel h3 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    .fm-wrapper #fm-map { 
        height: 400px !important; 
    }

    .fm-wrapper #fm-details-panel { 
        width: 100% !important; 
        max-height: 0; 
        opacity: 0; 
        padding: 0 20px; 
        transition: all 0.5s ease; 
        overflow: hidden; 
    }

    .fm-wrapper #fm-details-panel.active { 
        max-height: 1500px; 
        opacity: 1; 
        padding: 20px; 
        margin-top: 15px; 
        overflow: visible;
    }
}
/* ГЕНЕРАЛНО ПРАВИЛО ЗА ВСИЧКИ H3 В МОДУЛА */
@media (max-width: 767px) {
    .fm-wrapper h3, 
    #fm-details-panel h3, 
    #fm-details-content h3 {
        font-size: 1.3rem !important; /* Компактен размер за телефон */
        line-height: 1.2 !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        word-wrap: break-word !important; /* Предпазва от "излизане" на дълги думи */
    }
}
/* ДИЗАЙН НА ЗАГЛАВИЕТО */
.fm-wrapper .fm-heading {
    color: #1b5e20 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    margin-bottom: 25px !important;
}
/* ПРИНУДИТЕЛЕН MONTSERRAT ЗА МОБИЛНОТО МЕНЮ */

/* 1. Насочване към мобилния контейнер и всички линкове в него */
.mobile-menu-container, 
.ast-mobile-menu-wrap, 
.elementor-menu-toggle,
.elementor-nav-menu--dropdown,
#mobile-navigation,
.mobile-nav-wrap,
.off-canvas-menu {
    font-family: 'Montserrat', sans-serif !important;
}

/* 2. Насочване директно към линковете в разгънатото меню */
.mobile-menu-container a, 
.ast-mobile-menu-wrap a, 
.elementor-nav-menu--dropdown a,
.mobile-nav-wrap a,
#mobile-navigation a {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important; /* Правим го малко по-плътно за по-добра четимост */
    text-transform: none !important; /* Или uppercase, ако искаш само главни букви */
}

/* 3. За всеки случай - насочване към бутона (хамбургера) */
.menu-toggle, 
.hamburger, 
.mobile-menu-toggle {
    font-family: 'Montserrat', sans-serif !important;
}
/* --- СТИЛ ЗА ПИНА НА КАРТАТА --- */
.fm-custom-pin {
    font-size: 40px !important; /* Големина на емоджито */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); /* Лека сянка за дълбочина */
}

/* --- КОНТЕЙНЕР ЗА КОНТАКТИТЕ --- */
.fm-contact-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

/* --- САМИТЕ БУТОНИ (Телефон, Емейл, Навигация) --- */
.fm-contact-link {
    text-decoration: none !important;
    width: 100%;
    max-width: 280px;
    display: flex;
    align-items: center;
    background: #f1f8e9;
    padding: 12px 20px;
    border-radius: 50px;
    border: 1px solid #c8e6c9;
    color: #2e7d32 !important;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.2s ease;
}

.fm-contact-link:hover {
    background: #e8f5e9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.fm-contact-link .icon {
    font-size: 22px;
    margin-right: 15px;
    width: 30px;
    text-align: center;
}


/* Специфично за емейла, за да не излиза от бутона на малки екрани */
.fm-contact-link .text {
    word-break: break-all;
    font-size: 14px;
}

/* Стил за заглавието и описанието в панела */
.fm-detail-img { width: 100%; border-radius: 12px; margin-bottom: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.fm-detail-title { color: #1b5e20; text-align: center; font-size: 22px; margin-bottom: 12px; font-weight: 700; }
.fm-detail-desc { line-height: 1.6; color: #555; margin-bottom: 20px; text-align: center; }
/* Позициониране на бутона за затваряне в панела */
.fm-close-btn {
    background: none;
    border: none;
    font-size: 30px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 10;
    line-height: 1;
}

.fm-close-btn:hover {
    color: #d32f2f;
}

/* Уверяваме се, че филтър кутията е подредена */
.fm-find-wrapper {
    display: none; /* JS ще го покаже */
    text-align: center;
    margin-top: 20px;
}

/* Стил за празно състояние */
.fm-no-cats {
    padding: 20px;
    text-align: center;
    color: #999;
}
/* ==============================
   ФИКС ЗА БУТОНА (ЛУПАТА)
============================== */

/* 1. Форсираме контейнера да е видим */
.fm-find-wrapper {
    display: flex !important; /* Уверяваме се, че се вижда, когато е активно */
    justify-content: center !important;
    margin: 30px 0 !important;
    width: 100% !important;
}

/* 2. Пълна ресет-реконструкция на бутона */
#fm-find-btn {
    all: unset !important; /* Изчистваме всички наследени стилове от темата */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #2ecc71 !important; /* Ярко зелено */
    color: white !important;
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    border-radius: 50% !important; /* Пълен кръг */
    cursor: pointer !important;
    box-shadow: 0 10px 20px rgba(46, 204, 113, 0.4) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 999 !important;
    margin: 0 auto !important;
}

/* 3. Връщаме иконата (Лупата) */
/* Проверяваме два варианта - ако ползваш <i> таг или ако ползваш ::after */

#fm-find-btn i {
    font-size: 28px !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif !important;
    font-weight: 900 !important;
    display: inline-block !important;
}

/* Ако иконата е била през псевдо-елемент в плъгина ти: */
#fm-find-btn::after {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif !important;
    font-weight: 900 !important;
    font-size: 28px !important;
    content: "\f002" !important; /* Код за лупа в FontAwesome */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
}

#fm-find-btn:hover {
    transform: scale(1.1) !important;
    background-color: #27ae60 !important;
}
/* ==============================
   ОСНОВЕН КОНТЕЙНЕР (ВЪЗДУХ ОТГОРЕ)
============================== */
.fm-wrapper { 
    width: 100%; 
    padding: 0 20px; /* Махаме горния падинг тук, за да го контролираме в бокса */
    box-sizing: border-box; 
}

/* ОБЩИЯТ БЯЛ БЛОК */
.fm-wrapper .fm-filter-box {
    max-width: 1140px; 
    margin: 40px auto 30px auto !important; /* ТУК са тези 40px (2см) въздух отгоре */
    background: #ffffff !important;
    padding: 40px !important;
    border-radius: 25px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.06) !important;
    border: 1px solid #eef5ee !important;
}

/* ЗАГЛАВИЕТО */
.fm-wrapper .fm-heading {
    color: #1b5e20 !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    margin-bottom: 35px !important;
    text-transform: uppercase !important;
}
/* ==========================================================================
   КАТЕГОРИИ - КРАЙНО РЕШЕНИЕ: ЗЕЛЕНИ И РАЗДАЛЕЧЕНИ
   ========================================================================== */

/* 1. КОНТЕЙНЕРЪТ: ДОБАВЯМЕ "ВЪЗДУХ" МЕЖДУ ТЯХ */
.fm-wrapper .fm-filter-box .fm-categories-row {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 20px 30px !important; /* 20px между редовете, 30px между бутоните */
    margin: 0 auto 30px auto !important;
    background: transparent !important;
}

/* 2. БУТОНИТЕ: ГАРАНТИРАНО ЗЕЛЕНИ */
.fm-wrapper .fm-filter-box .fm-categories-row .fm-cat-btn {
    all: unset !important; /* Пълен ресет, за да премахнем темата */
    display: inline-block !important;
    
    /* Размери и позициониране */
    padding: 10px 22px !important; 
    min-width: 120px !important; 
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important; /* Нулираме марджини */
    box-sizing: border-box !important;

    /* СТИЛИСТИКА ОТ СНИМКАТА */
    border: 1px solid #43a047 !important; /* Красива зелена рамка */
    border-radius: 8px !important;
    color: #2e7d32 !important; /* Зелен текст */
    background-color: #ffffff !important; /* Бял фон */
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* 3. ЕФЕКТ ПРИ ПОСОЧВАНЕ (Hover) */
.fm-wrapper .fm-filter-box .fm-categories-row .fm-cat-btn:not(.active):hover {
    background-color: #f1f8e9 !important; /* Леко зелено */
    transform: translateY(-1px) !important;
    color: #1b5e20 !important;
}

/* 4. АКТИВНО СЪСТОЯНИЕ (Active) */
.fm-wrapper .fm-filter-box .fm-categories-row .fm-cat-btn.active {
    background-color: #34a853 !important; /* Плътно зелено */
    color: #ffffff !important; /* Бял текст */
    border-color: #2e7d32 !important;
    box-shadow: 0 4px 12px rgba(52, 168, 83, 0.2) !important;
}

/* ПОДКАТЕГОРИИТЕ - МОДЕРЕН СТИЛ */
.fm-wrapper .fm-subcategories-box {
    display: none; /* Контролира се от JS */
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 25px 0 !important;
    padding: 20px !important;
    border-top: 1px solid #f0f0f0 !important; /* Дискретна линия за разделяне вътре в бокса */
}

.fm-wrapper .fm-sub-item {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    background: #f9fdf9 !important;
    border: 1px solid #c8e6c9 !important;
    padding: 10px 20px !important;
    border-radius: 30px !important; /* Тип "хапче" за красота */
    color: #388e3c !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.fm-wrapper .fm-sub-item:hover {
    background: #e8f5e9 !important;
    transform: translateY(-2px) !important;
}

/* СТИЛ ЗА ЧЕКБОКСА */
.fm-wrapper .fm-sub-item input {
    margin-right: 10px !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: #2e7d32 !important;
    /* Разстояние (въздух) между бутоните */
    gap: 15px 25px !important; /* 15px вертикално, 25px хоризонтално */
    
    /* Допълнителен въздух около цялата група */
    padding: 20px 5 !important;
    margin: 10px 5 !important;
}
/* Използваме id-то за максимална тежест */
#fm-lightbox {
    display: none; 
    position: fixed !important; /* !important гарантира, че нищо няма да го премести */
    z-index: 9999999 !important; /* Слагаме го най-отгоре над всичко */
    left: 0;
    top: 0;
    width: 100vw; /* Заема цялата ширина на прозореца */
    height: 100vh; /* Заема цялата височина на прозореца */
    background-color: rgba(0, 0, 0, 0.9) !important; /* Тъмен прозрачен фон */
    align-items: center;
    justify-content: center;
}

#fm-lightbox img {
    max-width: 90%;
    max-height: 80%;
    object-fit: contain;
    border: 4px solid #fff;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.fm-close-lightbox {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #ffffff !important;
    font-size: 60px !important;
    font-family: Arial, sans-serif;
    font-weight: bold;
    cursor: pointer;
    line-height: 0.5;
    z-index: 10000000;
}

/* 3. МОБИЛНА ВЕРСИЯ - Едно под друго вътре в белия прозорец */
@media (max-width: 768px) {
    /* 1. КАТЕГОРИИ - ОСТАВАТ СУПЕР (РАЗПЪНАТИ И ЗЕЛЕНИ) */
    .fm-wrapper .fm-filter-box .fm-categories-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .fm-wrapper .fm-filter-box .fm-categories-row .fm-cat-btn {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 45px !important;
    }

    /* 2. ПОДКАТЕГОРИИ - СТЕШНЯВАМЕ ГИ */
    .fm-wrapper .fm-filter-box #fm-subcategories {
        flex-direction: column !important;
        align-items: center !important; /* Центрираме колоната */
        gap: 10px !important;
        padding: 15px 0 !important;
    }

    .fm-wrapper .fm-filter-box #fm-subcategories {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Центрираме самата колона в бокса */
        gap: 10px !important;
        padding: 20px 0 !important;
    }

    .fm-wrapper .fm-filter-box .fm-sub-item {
        width: 95% !important; 
        max-width: 320px !important; 
        margin: 0 auto !important;

        display: flex !important;
        flex-direction: row !important; /* Връщаме нормалния ред: тикче - текст */
        justify-content: flex-start !important; /* Подравняваме съдържанието вляво */
        align-items: center !important;
        
        padding: 12px 20px !important; /* Даваме малко повече място вътре */
        text-align: left !important;
    }

    /* Правим тикчетата да са подредени точно едно под друго */
    .fm-wrapper .fm-filter-box .fm-sub-item input {
        margin-right: 15px !important; /* Фиксирано разстояние до текста */
        margin-left: 0 !important;
        flex-shrink: 0 !important; /* Пречим на тикчето да се свива */
    }
    /* Заключване на скрола */
html.hfe-flyout-open, 
body.hfe-flyout-open {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed !important;
    width: 100% !important;
}
/* ТЕКСТОВЕ: БЕЛИ, ГОЛЕМИ, MONTSERRAT */
@media (max-width: 767px) {
  .elementor-81 .elementor-element.elementor-element-d245aa6 .menu-item a.hfe-menu-item, 
  .elementor-81 .elementor-element.elementor-element-d245aa6 .menu-item a.hfe-sub-menu-item {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 28px !important; /* Направих ги доста по-големи */
    text-align: center !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    font-weight: 600 !important;
    display: block !important;
  }

  /* Центриране на целия контейнер */
  .hfe-nav-menu-flyout-container .hfe-side-menu-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}
/* ПЕРФЕКТЕН "X" БЕЗ ВЪТРЕШНИ РАМКИ */
.hfe-flyout-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    
    
    /* Изчистваме всички вътрешни отстояния */
    padding: 0 !important;
}

/* Скриваме вътрешната рамка на SVG иконата */
.hfe-flyout-close svg {
    border: none !important;
    background: none !important;
    
    /* 3. Увеличаваме самия символ "X" */
    width: 45px !important; /* Увеличаваме X-а */
    height: 45px !important;
    fill: #ffffff !important; /* Бял цвят за X */
    
    /* Центрираме го идеално */
    display: block !important;
    margin: 0 !important;
}/* Контейнер на слайдера */
.fm-main-slider {
    width: 100%;
    height: 250px; /* Можеш да промениш височината по твой вкус */
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;
}

/* Снимките в слайдера */
.fm-main-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Важно: запълва пространството без да деформира снимката */
}

/* Точките за навигация */
.fm-main-slider .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.7;
}

.fm-main-slider .swiper-pagination-bullet-active {
    background: #2271b1; /* Основният цвят на вашия сайт */
    opacity: 1;
}
/* Контейнерът за голямата снимка */
#fm-lightbox {
    display: none; /* Скрит по подразбиране */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9); /* Черен фон с прозрачност */
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Самата голяма снимка */
#fm-lightbox img {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
    border-radius: 4px;
}
#fm-lightbox {
    display: none;
    position: fixed; /* Застопорява го върху целия екран */
    z-index: 999999; /* Много високо число, за да е над картата и менютата */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Тъмен фон */
    align-items: center;
    justify-content: center;
}

#fm-lightbox img {
    max-width: 90%;
    max-height: 85%;
    object-fit: contain;
    border: 3px solid #fff;
    border-radius: 5px;
}

/* Бутонът Хикс */
.fm-close-lightbox {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
/* Стил за новия бутон за поръчка в картата */
.fm-contact-link.fm-order-btn-link {
    background: #e8f5e9 !important;
    border-color: #81c784 !important;
    color: #2e7d32 !important;
    font-weight: 700 !important;
}

.fm-contact-link.fm-order-btn-link:hover {
    background: #34a853 !important;
    color: #ffffff !important;
}
/* --- ЕФЕКТ НА ЛЕВИТАЦИЯ (ПЛАВАНЕ) ЗА БУТОНА ЗА ПОРЪЧКА --- */
@keyframes fmLevitate {
    0% {
        transform: translateY(0px);
        box-shadow: 0 4px 10px rgba(46, 125, 50, 0.15);
    }
    50% {
        transform: translateY(-5px); /* Издига се леко нагоре */
        box-shadow: 0 10px 20px rgba(46, 125, 50, 0.3); /* Хвърля по-дълбока сянка */
    }
    100% {
        transform: translateY(0px); /* Връща се в изходна позиция */
        box-shadow: 0 4px 10px rgba(46, 125, 50, 0.15);
    }
}

.fm-contact-link.fm-order-btn-link {
    animation: fmLevitate 2.5s infinite ease-in-out !important;
    position: relative;
    transition: background 0.3s ease;
}

/* При задържане с мишката спираме левитацията и го правим още по-активен */
.fm-contact-link.fm-order-btn-link:hover {
    animation: none !important;
    transform: translateY(-3px) scale(1.02);
    background: #34a853 !important;
    color: #ffffff !important;
}