/* ===================================================
   Custom Header — 3-row navbar (Upper + Lower + Sidebar)
   =================================================== */



/* ---- Bootstrap Container Override ---- */
.container, .container-lg, .container-md, .container-sm {
  max-width: 1200px !important;
  width: 100% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 1216px) {
  .container, .container-lg, .container-md, .container-sm {
    max-width: 1200px !important;
  }
}

/* ---- Center content in container ---- */
.wrapper {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 1200px !important;
}

.wrapper .content {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* ---- Search Icon Mobile ---- */
.navbar-search-icon-form {
  display: flex;
  align-items: center;
}

.navbar-search-icon {
  background: none;
  border: none;
  color: #fff !important;
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease;
}

.navbar-search-icon i.bi {
  color: #fff !important;
}

.navbar-search-icon:hover {
  opacity: 0.8;
}

/* ---- Search in Menu (Desktop) ---- */
.search-in-menu {
  display: none !important;
  list-style: none !important;
  margin: 8px 0 !important;
  padding: 0 !important;
}

.search-form-inline {
  display: flex;
  align-items: center;
}

.search-button-inline {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease;
}

.search-button-inline:hover {
  opacity: 0.8;
}

.search-button-inline i.bi {
  color: #fff !important;
}

/* Navbar height — Sidebar меню */
.navbar {
  height: 100px;
  transition: height 0.4s ease;
  display: flex;
  align-items: center;
}

/* Adjust page content offset */
.wrapper {
  padding-top: 110px;
}

/* Wrapper for menu + search — centered horizontally */
.navbar-sidebar-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex: 1;
}

/* ---- Desktop: лого | меню | пошук ---- */
@media screen and (min-width: 993px) {
  .navbar .nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .navbar-brand {
    flex-shrink: 0;
    align-self: center;
  }

  .navbar-sidebar-wrapper {
    flex: 1 !important;
    justify-content: center !important;
  }

  /* double-menu стає "прозорим" в wrapper */
  .navbar-sidebar-wrapper .double-menu {
    display: contents !important;
  }

  /* Sidebar menu на destkop */
  .navbar-sidebar-wrapper .double-menu .collapse {
    display: flex !important;
    align-items: center !important;
  }

  /* Search в меню на десктопі — видимий */
  .search-in-menu {
    display: list-item !important;
  }

  /* Мобільний пошук прихован на десктопі */
  .navbar-search-icon-form {
    display: none !important;
  }
}

/* ---- Sidebar menu (позиція 2, стилі як down-menu-nav) ---- */
.navbar .nav-container .double-menu .sidebar-menu-nav {
  border-top: none;
  justify-content: center;
  gap: 30px;
  background-color: transparent;
}

.navbar .nav-container .double-menu .sidebar-menu-nav li a {
  font-size: 14px !important;
  font-weight: 400 !important;
  position: relative;
}

.navbar .nav-container .double-menu .sidebar-menu-nav li a::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.navbar .nav-container .double-menu .sidebar-menu-nav li i.bi {
  font-size: 18px !important;
  margin-right: 8px !important;
}

.navbar .nav-container .double-menu .sidebar-menu-nav li {
  margin: 8px 0;
  display: flex;
  align-items: center;
}

.navbar .nav-container .double-menu .sidebar-menu-nav li a:hover {
  opacity: 1;
}

.navbar .nav-container .double-menu .sidebar-menu-nav li a:hover::after {
  opacity: 1;
}

/* Sub-menu inside sidebar-menu-nav stays white/readable */
.navbar .nav-container .double-menu .sidebar-menu-nav .sub-menu li a {
  text-transform: uppercase;
  opacity: 1;
}

/* ---- Mobile ≤ 992px ---- */
@media screen and (max-width: 992px) {
  /* Navbar — фіксована висота, меню як оверлей */
  .navbar {
    height: 95px !important;
    overflow: visible !important;
  }

  /* Іконки меню приховані на мобільному — але залишаються клікабельними */
  .navbar .double-menu li > span:first-child {
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: auto !important;
  }

  /* Тоглер завжди поверх overlay */
  .navbar-toggler {
    position: relative !important;
    z-index: 9999 !important;
  }

  /* Wrapper top offset on mobile */
  .wrapper {
    padding-top: 115px !important;
  }

  /* Повноекранний оверлей — схований вище viewport */
  .navbar .double-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background: #e11b42;
    z-index: 1028;
    padding-top: 95px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.35s ease, visibility 0s linear 0.35s;
  }

  /* Відкритий стан — через JS клас АБО через Bootstrap .show */
  .navbar.mobile-menu-open .double-menu,
  .navbar:has(.navbar-collapse.show) .double-menu,
  .navbar:has(.navbar-collapse.collapsing) .double-menu {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.35s ease, visibility 0s linear 0s;
  }

  /* li з дочірнім меню — block на повну ширину щоб sub-menu центрувалось по екрану */
  .navbar-nav .menu-item-has-children {
    display: block !important;
    width: 100% !important;
    margin: 2px 5px !important;
    position: relative !important;
  }
  .navbar-nav .menu-item-has-children > span,
  .navbar-nav .menu-item-has-children > a {
    display: inline !important;
  }

  /* Sub-menu на мобільному: розкривається під меню */
  .navbar-nav .sub-menu {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s ease !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .navbar-nav .menu-item-has-children.sub-menu-open > .sub-menu {
    height: auto !important;
    max-height: 500px !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: #f9f9f9 !important;
    border-top: 1px solid #d4d4d4 !important;
    border-bottom: 1px solid #d4d4d4 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
    padding: 5px 0 !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  .navbar-nav .sub-menu li {
    padding: 0 !important;
    font-weight: 500 !important;
    list-style: none !important;
    margin: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    display: block !important;
    width: 100% !important;
  }

  .navbar-nav .sub-menu li:last-child {
    border-bottom: none !important;
  }

  .navbar-nav .sub-menu li a {
    color: #2f3642 !important;
    text-transform: uppercase !important;
    padding: 10px 15px !important;
    display: block !important;
    font-size: 14px !important;
    text-align: center !important;
  }

  /* Sidebar menu on mobile */
  .sidebar-menu-nav {
    text-align: center !important;
  }

  .sidebar-menu-nav li {
    display: inline-block !important;
    margin: 2px 5px !important;
  }

  /* Hide search in menu on mobile */
  .search-in-menu {
    display: none !important;
  }
}