/*
 * HorecaDepot CSS migration.
 * Source of truth: local WoodMart Theme Settings backup dated 2026-07-14.
 * Structural migration only; declarations and selectors are preserved.
 */

/* ==========================================================================
   1. КОД ЗА КОМПЮТЪР (ДЕСКТОП)
   ========================================================================== */
@media (min-width: 1025px) {
    .whb-header-bottom-inner ul.menu > li.special-menu-btn > a.woodmart-nav-link {
        background-color: var(--hd-color-accent) !important;
        color: var(--hd-color-text-primary) !important;
        border: 1px solid var(--hd-color-accent) !important;
        font-weight: 800 !important;
        border-radius: var(--hd-radius-md) !important;
        box-sizing: border-box;
        height: var(--hd-control-standard) !important;
        padding: 8px 16px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        transition: background-color var(--hd-motion-standard) var(--hd-ease-standard),
                    color var(--hd-motion-standard) var(--hd-ease-standard),
                    border-color var(--hd-motion-standard) var(--hd-ease-standard),
                    box-shadow var(--hd-motion-standard) var(--hd-ease-standard),
                    transform var(--hd-motion-standard) var(--hd-ease-standard) !important;
    }
    .whb-header-bottom-inner ul.menu > li.special-menu-btn > a.woodmart-nav-link:hover {
        background-color: var(--hd-color-accent-hover) !important;
        color: var(--hd-color-text-primary) !important;
        border-color: var(--hd-color-accent-hover) !important;
        transform: translateY(-2px) !important;
    }
    .whb-header-bottom-inner ul.menu > li.special-menu-btn > a.woodmart-nav-link:active {
        transform: translateY(0) !important;
    }
    .whb-header-bottom-inner ul.menu > li.special-menu-btn > a.woodmart-nav-link:focus-visible {
        box-shadow: 0 0 0 3px rgba(253,185,19,.35) !important;
    }
}

/* ==========================================================================
   2. ИЗРИЧЕН КОД ЗА ТЕЛЕФОН (МОБИЛНО СТРАНИЧНО МЕНЮ)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Нагласяме кутийката в мобилния списък */
    .special-menu-btn {
        display: block !important;
        width: 100% !important;
        padding: 4px 15px !important; /* Прави отстояние от краищата на екрана */
        box-sizing: border-box;
    }
    
    /* Правим самия линк да изглежда като голям, удобен бутон за палец */
    .special-menu-btn a {
        background-color: var(--hd-color-accent) !important;
        color: var(--hd-color-text-primary) !important;
        border: 1px solid var(--hd-color-accent) !important;
        font-weight: 800 !important;
        border-radius: var(--hd-radius-md) !important;
        box-sizing: border-box;
        height: var(--hd-control-standard) !important;
        padding: 12px 20px !important; /* По-дебел бутон, за да се цъка лесно */
        display: block !important;     /* Разпъва го като плътен блок */
        text-align: center !important;  /* Центрира текста "За нас" / "Как да поръчам" */
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin: 10px 0 !important;     /* Отделя го ясно от горния и долния линк в менюто */
        transition: background-color var(--hd-motion-standard) var(--hd-ease-standard),
                    color var(--hd-motion-standard) var(--hd-ease-standard),
                    border-color var(--hd-motion-standard) var(--hd-ease-standard),
                    box-shadow var(--hd-motion-standard) var(--hd-ease-standard),
                    transform var(--hd-motion-standard) var(--hd-ease-standard) !important;
    }
    
    /* Ефект при натискане с пръст на телефона */
    .special-menu-btn a:active,
    .special-menu-btn a:hover {
        background-color: var(--hd-color-accent-hover) !important;
        color: var(--hd-color-text-primary) !important;
        border-color: var(--hd-color-accent-hover) !important;
    }
    .special-menu-btn a:hover {
        transform: translateY(-2px) !important;
    }
    .special-menu-btn a:active {
        transform: translateY(0) !important;
    }
    .special-menu-btn a:focus-visible {
        box-shadow: 0 0 0 3px rgba(253,185,19,.35) !important;
    }
}
/* WoodMart implicit wrapper for desktop. */
@media (min-width: 1025px) {
/* ============================================================
   🛒 HORECA DEPOT - БУТОН "КАК ДА ПОРЪЧАМ" (ЖЪЛТ)
   ============================================================ */

/* Базов изглед (Жълт бутон с бял текст) */
.whb-header-bottom-inner .wd-button-wrapper a.btn {
    background-color: var(--hd-color-accent) !important;
    color: var(--hd-color-text-primary) !important;
    border: 1px solid var(--hd-color-accent) !important;
    border-radius: var(--hd-radius-md) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: background-color var(--hd-motion-standard) var(--hd-ease-standard),
                color var(--hd-motion-standard) var(--hd-ease-standard),
                border-color var(--hd-motion-standard) var(--hd-ease-standard),
                box-shadow var(--hd-motion-standard) var(--hd-ease-standard),
                transform var(--hd-motion-standard) var(--hd-ease-standard) !important;
}

/* Ховър ефект (Става бял с жълт текст и леко сияние) */
.whb-header-bottom-inner .wd-button-wrapper a.btn:hover {
    background-color: var(--hd-color-accent-hover) !important;
    color: var(--hd-color-text-primary) !important;
    border-color: var(--hd-color-accent-hover) !important;
    box-shadow: var(--hd-shadow-accent) !important;
    transform: translateY(-2px) !important;
}

.whb-header-bottom-inner .wd-button-wrapper a.btn:active {
    transform: translateY(0) !important;
}

.whb-header-bottom-inner .wd-button-wrapper a.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(253,185,19,.35) !important;
}

}