.ic-header { background:#A8005D; box-shadow: 0 1px 14px 1px rgba(0, 0, 0, .3);
    box-sizing: border-box; position:sticky; top:0; z-index:1000; }
.ic-header .container { max-width:1320px; margin:0 auto; padding:12px 0; }

.ic-header__bar { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:16px; }
.ic-header__bar.container { display: flex; align-items: center; justify-content: space-between;}
.ic-menu { display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.ic-menu li { margin:0; }
.ic-menu a { text-decoration:none; color:#F7B749; font-weight:600; letter-spacing:.04em; }
.ic-menu a:hover { opacity:.8; }

.ic-header__logo img { height:28px; width:auto; display:block; }
.ic-header__logo-text { font-weight:800; text-decoration:none; color:#111; font-size:18px; }

.ic-header__right { display:flex; align-items:center; gap:16px; justify-self:end; order: 3;}

.ic-lang { display:flex; gap:10px; list-style:none; margin:0; padding:0; }
.ic-lang__item a { text-decoration:none; color:#333; font-weight:600; }
.ic-lang__item.is-active a { text-decoration:underline; }

.ic-burger { display:none; width:36px; height:36px; border:0; background:transparent; position:relative; order: 3;
    margin-left: auto;}
.ic-burger span { position:absolute; left:6px; right:6px; height:2px; background:#111; transition:.2s; }
.ic-burger span:nth-child(1){ top:10px; }
.ic-burger span:nth-child(2){ top:17px; }
.ic-burger span:nth-child(3){ top:24px; }

/* Offcanvas */
/*.ic-offcanvas { position:fixed; inset:0; display:none; }*/
/*.ic-offcanvas.is-open { display:block; }*/
/*.ic-offcanvas__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.35); }*/
/*.ic-offcanvas__inner { position:absolute; top:0; bottom:0; right:0; width:86%; max-width:400px; background:#fff; padding:24px 16px; overflow:auto; }*/
/*.ic-offcanvas__close { position:absolute; top:6px; right:8px; font-size:28px; border:0; background:transparent; line-height:1; }*/
/*.ic-offcanvas .ic-menu--mobile { flex-direction:column; gap:12px; margin:16px 0; }*/

@media (max-width: 1024px) {
    .ic-header__nav--left { display:none; }
    .ic-header__nav--right { display:none; }
    .ic-header__lang { display:none; }
    .ic-burger { display:inline-block; }
}

.ic-lang-dropdown {
    position: relative;
    display: inline-block;
    font-family: inherit;
}

/* Поточна мова */
.ic-lang-current {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.ic-lang-current:hover {
    background: #f8f8f8;
}

.ic-arrow {
    font-size: 10px;
    transition: transform 0.3s;
}

.ic-lang-dropdown:hover .ic-arrow {
    transform: rotate(180deg);
}

/* Випадаючий список */
.ic-lang-list {
    position: absolute;
    top: calc(100% - 2px); /* прибрано розрив */
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: all 0.25s ease;
    min-width: 50px;
    z-index: 99;
}

/* Показываем список при ховере на контейнер */
.ic-lang-dropdown:hover .ic-lang-list,
.ic-lang-list:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Стилізація пунктів */
.ic-lang-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    transition: background 0.3s;
}

.ic-lang-list li a:hover {
    background: #f0f0f0;
}

.ic-flag img {
    width: 22px;
    height: auto;
    display: block;
}

/* ===== Мобільне меню (офканвас) ===== */
.ic-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 85%; /* трохи менше, щоб не доїжджало до лівого краю */
    max-width: 400px;
    background-color: #fff;
    color: #000;
    transform: translateX(100%);
    transition: transform 0.35s ease-in-out;
    z-index: 9999;

}

.ic-offcanvas.is-open {
    transform: translateX(0); /* створює ефект, ніби меню трохи не доїхало до лівого краю */
}

.ic-offcanvas__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
    z-index: 9998;
}

.ic-offcanvas.is-open ~ .ic-offcanvas__backdrop {
    opacity: 1;
    visibility: visible;
}

/* Верхня панель: логотип ліворуч, хрестик праворуч */
.ic-offcanvas__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
}

.ic-offcanvas__logo {
    max-height: 40px;
    width: auto;
}

.ic-offcanvas__close {
    position: absolute;
    top: 13px;
    right: 50px;
    background: none;
    border: none;
    font-size: 50px;
    line-height: 1;
    cursor: pointer;
    color: #000;
    z-index: 10000;
}

/* Меню по центру, розділене лініями */
.ic-menu--mobile {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
    width: 100%;
}

.ic-menu--mobile li {
    width: 100%;
    border-bottom: 1px solid #e5e5e5; /* лінія під кожним пунктом */
}

.ic-menu--mobile li:first-child {
    border-top: 1px solid #e5e5e5; /* щоб була лінія і зверху */
}

.ic-menu--mobile a {
    display: block;
    width: 100%;
    padding: 15px;
    color: #000;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    /*transition: background-color 0.3s, color 0.3s;*/
}

.ic-menu--mobile a:hover {
    background-color: #a8005d;
    color: #fff;
}

/* Блок мов */
.ic-offcanvas__lang {
    margin: 20px 15px;;
}

/* Для маленьких екранів — на всю ширину */
@media (max-width: 480px) {
    .ic-offcanvas {
        width: 90%;
    }

    .ic-offcanvas.is-open {
        transform: translateX(10%);
    }

    .ic-menu--mobile a {
        font-size: 16px;
        padding: 12px;
    }
}






