/* ============================================================
   wod_header_center — шапка с логотипом по центру + иконки футера
   Тема: oct_showcase

   Все правила шапки ограничены классом .wod-top-centered,
   который модификатор навешивает на <nav id="top">.
   Без модификатора файл ни на что не влияет.

   Иконки — маски по образцу .sc-btn-icon темы, цвет задаётся
   свойством background:
       маркер  → sprite.svg#include--top-location-icon (класс темы)
       трубка  → sprite.svg#include--phone-icon
       язык    → wod-lang-icon.svg (наш файл)
       футер   → sprite.svg#include--footer-phones-title-icon
                 sprite.svg#include--footer-socials-title-icon
   ============================================================ */

/* --- Цвета: меняются в одном месте ------------------------- */
#top.wod-top-centered {
    --wod-header-text: #fff;       /* адрес, язык, телефон      */
    --wod-header-icon: #fff;       /* иконки в шапке            */
    --wod-slogan-color: #1c1c28;   /* слоган под логотипом      */
}
.sc-footer {
    --wod-footer-icon: #c7c9d9;    /* иконки заголовков футера  */
}

/* ===========================================================
   ИКОНКИ ШАПКИ
   =========================================================== */
#top.wod-top-centered .wod-header-icon {
    width: 16px;
    height: 16px;
    background: #fff;
    background: var(--wod-header-icon, #fff);
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16px;
    flex: 0 0 16px;
}
.wod-header-icon-phone {
    -webkit-mask-image: url(../img/sprite.svg#include--phone-icon);
    mask-image: url(../img/sprite.svg#include--phone-icon);
}
.wod-header-icon-lang {
    -webkit-mask-image: url(../img/wod-lang-icon.svg);
    mask-image: url(../img/wod-lang-icon.svg);
}

/* --- Адрес ------------------------------------------------- */
#top.wod-top-centered .wod-header-address {
    color: #fff;
    color: var(--wod-header-text, #fff);
    text-decoration: none;
    line-height: 1.25;
    max-width: 280px;
}
#top.wod-top-centered .wod-header-address:hover {
    text-decoration: underline;
}

/* --- Слоган ------------------------------------------------ */
#top.wod-top-centered .wod-header-slogan {
    display: none;
    color: #1c1c28;
    color: var(--wod-slogan-color, #1c1c28);
    line-height: 1.2;
    white-space: nowrap;
}

/* --- Телефон ----------------------------------------------- */
#top.wod-top-centered .wod-header-phone {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* ===========================================================
   ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА — выпадающий список слева, после меню
   Механику открытия берём у темы: .sc-dropdown-box /
   .sc-dropdown-toggle / .sc-dropdown (ховер на десктопе,
   клик на тач-устройствах) — свой JS не нужен.
   =========================================================== */
#top.wod-top-centered .wod-lang-dropdown .wod-lang-toggle {
    color: #fff;
    color: var(--wod-header-text, #fff);
}
#top.wod-top-centered .wod-lang-dropdown .sc-dropdown {
    min-width: 120px;
}
#top.wod-top-centered .wod-lang-dropdown .sc-dropdown-inner {
    min-width: 120px;
}
/* Штатный .sc-switcher внутри выпадашки — в вертикальный список.
   Утилиты Bootstrap (p-2, br-12, ms-3/ms-xl-4) идут с !important. */
#top.wod-top-centered .wod-lang-dropdown .sc-switcher {
    background: transparent !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
#top.wod-top-centered .wod-lang-dropdown .sc-switcher button {
    color: #1c1c28;
    width: 100%;
    padding: .375rem .5rem;
    border-radius: 4px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    line-height: 1.25rem;
}
#top.wod-top-centered .wod-lang-dropdown .sc-switcher button:hover,
#top.wod-top-centered .wod-lang-dropdown .sc-switcher button.active {
    background: #f2f4f8;
    border: 0;
}

/* ===========================================================
   Планшет и десктоп: логотип по центру
   =========================================================== */
@media (min-width: 768px) {
    /* Полоса выше штатной, поэтому h-100 у контейнера больше не
       работает — центрируем содержимое флексом самого #top. */
    #top.wod-top-centered {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: auto;
        min-height: 96px;
        padding: .5rem 0;
    }
    /* .h-100 у контейнера идёт с !important — перебиваем */
    #top.wod-top-centered > .container-fluid {
        width: 100%;
        height: auto !important;
    }

    /* Логотип — абсолютно по центру экрана */
    #top.wod-top-centered #logo {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        padding: 0;
        margin: 0;
        z-index: 3;
        max-width: 240px;
    }
    #top.wod-top-centered #logo img {
        max-height: 80px;
        width: auto;
    }

    /* Есть слоган — логотип прижимаем вверх, слоган ставим под ним */
    #top.wod-top-centered.wod-has-slogan {
        min-height: 116px;
    }
    #top.wod-top-centered.wod-has-slogan #logo {
        top: .75rem;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    #top.wod-top-centered.wod-has-slogan #logo img {
        max-height: 68px;
    }
    #top.wod-top-centered .wod-header-slogan {
        display: block;
        position: absolute;
        left: 50%;
        bottom: .5rem;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        z-index: 3;
    }

    /* Левая часть: меню, затем язык */
    #top.wod-top-centered .top-left {
        min-width: 0;
    }
    #top.wod-top-centered .top-left > .wod-lang-dropdown {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        margin-left: 1rem;
    }

    /* Правая часть: адрес → валюта → телефон */
    #top.wod-top-centered .top-right > .wod-header-address   { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
    #top.wod-top-centered .top-right > #oct_desktop_currency { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
    #top.wod-top-centered .top-right > .sc-dropdown-box      { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
    #top.wod-top-centered .top-right > .popup-call-trigger   { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }

    #top.wod-top-centered .top-right > .sc-dropdown-box {
        margin-left: 1rem;
    }
}

/* На планшете места мало — адрес прячем */
@media (min-width: 768px) and (max-width: 1199.98px) {
    #top.wod-top-centered .wod-header-address {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    #top.wod-top-centered {
        min-height: 112px;
    }
    #top.wod-top-centered #logo {
        max-width: 320px;
        padding-right: 0;
    }
    #top.wod-top-centered #logo img {
        max-height: 96px;
    }
    #top.wod-top-centered.wod-has-slogan {
        min-height: 132px;
    }
    #top.wod-top-centered.wod-has-slogan #logo img {
        max-height: 80px;
    }
    #top.wod-top-centered .wod-header-slogan {
        font-size: .8125rem;
        max-width: 34vw;
    }
    #top.wod-top-centered .top-left > .wod-lang-dropdown {
        margin-left: 1.5rem;
    }
    #top.wod-top-centered .top-right > .sc-dropdown-box {
        margin-left: 1.5rem;
    }
}

/* --- Мобильные: шапка темы не меняется --------------------- */
@media (max-width: 767.98px) {
    #top.wod-top-centered .wod-header-address,
    #top.wod-top-centered .wod-header-slogan {
        display: none !important;
    }
}

/* ===========================================================
   ИКОНКИ ФУТЕРА
   Были <img src="sprite.svg#...">, стали span.sc-btn-icon —
   цвет управляется через --wod-footer-icon.
   =========================================================== */
.sc-footer .wod-footer-icon {
    width: 24px;
    height: 24px;
    background: #c7c9d9;
    background: var(--wod-footer-icon, #c7c9d9);
    -webkit-box-flex: 0;
    -ms-flex: 0 0 24px;
    flex: 0 0 24px;
}
.wod-footer-icon-phones {
    -webkit-mask-image: url(../img/sprite.svg#include--footer-phones-title-icon);
    mask-image: url(../img/sprite.svg#include--footer-phones-title-icon);
}
.wod-footer-icon-socials {
    -webkit-mask-image: url(../img/sprite.svg#include--footer-socials-title-icon);
    mask-image: url(../img/sprite.svg#include--footer-socials-title-icon);
}