header {
  background: var(--header-bg-color);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  padding: 8px 20px;
  position: fixed;
  width: 100%;
  height: auto;
  gap: 10px;
  z-index: 11;
}

.topHead {
	display: flex;
	justify-content: space-between;
  gap: 8px;
}

.middleHead {
  background-color: var(--header-middle-bg-color);
  border-radius: 7px;
  padding: 0 17px;
  min-height: 43px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  flex-shrink: 2;
}
.middleHead nav ul {
	flex-wrap: wrap;
}

.middleHead .menu img {
	max-height: 17px;
}

.logo {
  display: flex;
  align-items: center;
}
.logo img {
  max-height: 28px;
  margin-right: 10px;
}
nav {
  display: flex;
  gap: 23px;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}
nav li {
  position: relative;
  padding: 5px;
  align-items: center;
  display: flex;
  gap: 6px;
  transition: background 0.3s;
}

nav li:hover {
  background: var(--header-menu-link-hover-bg);
  border-radius: 5px;
}

nav li a {
  text-decoration: none;
  font-size: 14px;
  color: var(--header-menu-link-color);
  text-transform: uppercase;
}

nav li a:hover{
  text-decoration: none;
  font-size: 14px;
  color: var(--header-menu-link-hover-color);
  text-transform: uppercase;
}

.submenu  {
  /*display: none;*/
 /* position: absolute;
  top: 100%;
  left: 0;*/
  display: flex;
  background: var(--header-submenu-bg);
  min-width: 200px;
  z-index: 100;
  border-radius: 0 0 10px 10px;
  padding: 8px 15px;
  flex-direction: column;
  gap: 10px;
}

aside .submenu {
 display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.submenu ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 0.5px solid var(--header-submenu-border);
  padding-left: 10px;
  min-width: 143px;
}

.submenu li {
  padding: 0;
}

.submenu li:hover  {
  background: none;
}

.submenu li:hover a {
  font-weight: 700;
  color: var(--header-submenu-link-hover);
}

nav li ul {
  flex-direction: column;
}

.submenu a {
  color: var(--header-submenu-link-color);
  font-size: 14px;
  text-transform: none;
}

.submenuWrap {
  display: none;
}

nav li:hover .submenuWrap {
  display: flex;
}

.submenuWrap {
  padding: 0 20px 20px 20px;
  position: absolute;
  top: 100%;
  left: -20px;
}

nav li:hover a::after{
  transform: translateY(0%) rotate(180deg);
}
.indoor-unit {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.submenu a.menuBtn {
  width: 100%;
  padding: 10px;
  background: #DEECF8;
  font-size: 14px;
  text-transform: uppercase;
  color: #215584;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.submenu a.menuBtn:hover {
  background: #E6F4FF;
}

.indoor-block {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  row-gap: 12px;      
  column-gap: 10px; 
}

.indoor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 9px;
  width: 225px;
  height: auto;
  min-height: 53px;
  background: var(--indoor-item-bg);
  border-radius: 7px;
  transition: background 0.3s;
}

.indoor-item:hover {
background: var(--indoor-item-hover-bg);
}

.indoorText {
  display: flex;
  gap: 4px;
  flex-direction: column;
  align-items: flex-start;
}

.indoorText .labelMenu {
  background-color: var(--indoor-label-bg);
  color: var(--indoor-label-text);
  text-transform: uppercase;
  font-size: 7.5px;
  min-width: 30px;
  border-radius: 2.3px;
  padding: 2px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.indoorText p {
  color: var(--indoor-item-text);
  font-size: 10px;
}

.indoor-unit.underBlock ul {
min-width: 225px;
}  
  
.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn {
  background: var(--header-btn-bg);
  border-radius: 7px;
  color: var(--header-btn-color);
  min-height: 28px;
  min-width: 28px;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iconBtn {
 min-width: 28px;
  min-height: 28px;
  padding: 10px;
  max-width: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.iconBtn img {
  max-width: 28px;
  max-height: 28px;
}
.btn:hover {
  background: var(--header-btn-hover-bg);
}
.registration, .login {
  padding: 6px 10px;
}
.registration {
  min-width: 156px;
  max-width: 200px;
  height: auto;
}

.login {
  min-width: 104px;
  max-width: 200px;
  height: auto;
}

.btn.registration {
  background: var(--header-btn-reg-bg);
}

.btn.registration:hover {
  background: var(--header-btn-reg-hover-bg);
}

.languages {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 6px 10px;
  cursor: pointer;
}

.langToggle {
  color: var(--lang-toggle-color);
}

.mobileMenu {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 27px;
}
.mobileMenu a {
  text-decoration: none;
  font-size: 11px;
  color: #7599B9;
}

.headBtns {
  display: flex;
  gap: 8px;
  align-items: center;
}

.languages::after {
  content: "";
  background: url(../img/menu-icons/arrow.svg) no-repeat center;
  background-size: contain;
  width: 10px;   
  height: 10px;
  transition: transform 0.4s;
}

.languages.active::after {
  transform: translateY(0%) rotate(180deg);
}

.listLang {
  display: none;
  position: absolute;
  top: 100%;
  left: 0px;
  margin-top: 5px;
  background: #fff;
  padding: 5px 10px;
  list-style: none;
  z-index: 1000;
  flex-direction: column;
  gap: 7px;
  border-radius: 0 0 10px 10px;
  width: 100%;
}

.listLang.active {
  display: flex;
}

.listLang li {
  color: #215584;
  font-size: 14px;
}

.listLang a {
	cursor: pointer;
	display: inline-block;
	width: 100%;
}

.mobMenuHeader .listLang a {
color: var(--mobile-menu-lang-text-open);
}

.actions .listLang li {
  color: var(--lang-list-text);
}
.actions .listLang {
  background: var(--lang-list-bg-actions);
}

.mobMenuHeader .listLang {
  left: -10px;
}

.tka_style {
	font-weight: 400;
}

.menuToggle {
  display: none;
}
.burger {
  width: 24px;
  height: 3px;
  background-color: #44A26A;
  margin: 2px 0;
  border-radius: 50px;
  transition: 0.3s ease;
}

.menu li:has(.submenu) > a::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url(../img/menu-icons/arrow.svg) no-repeat center;
  background-size: contain;
  margin-left: 6px;
  transition: transform 0.4s ease;
}

.menu li:has(.submenu.open) > a::after {
  transform: rotate(180deg);
}

.menuMob {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--mobile-menu-blocks-bg);
  z-index: 20;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  font-family: Arial, sans-serif;
}

.menuMob .listLang {
  min-width: fit-content;
}

.menuMob.active {
  transform: translateX(0);
}

.menuMob .iconBtn {
  margin-left: auto;
    margin-right: 10px;
    background: var(--mob-menu-header-bg);
    width: 43px;
    height: 28px;
}

.mobMenuHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  border-bottom: 1px solid #ddd;
  background-color: var(--mobile-menu-bg-header);
}

.mobMenuLeft p {
  cursor: pointer;
  font-size: 14px;
  color: var(--mobile-menu-lang-text);
}

.mobMenuLeft .languages {
  display: flex;
  padding: 0;
  background: var(--mobile-menu-lang-bg);
}

.mobMenuLeft .languages .active {
  background: var(--mobile-menu-lang-bg-open);
  color: var(--mobile-menu-lang-text-open);
}

.mobMenuLeft .languages::after {
    content: "";
    background: url(../img/menu-icons/arrow-blue.svg) no-repeat center;
    background-size: contain;
    width: 10px;
    height: 10px;
    transition: transform 0.4s;
}

.mobMenuLeft {
  display: flex;
  align-items: center;
  gap: 10px;
}

.menuTime {
  padding-right: 10px;
  border-right: 1px solid #D4DEE8;
}

.menuSettings,
.closeMenu {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  margin-left: 10px;
}

.closeMenu img {
  width: 15px;
}

.mobMenuDownload {
  display: flex;
  align-items: center;
  background: var(--mobile-menu-download-bg);
  gap: 7px;
  min-height: 94px;
}

.blockQr {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px 15px 15px 0;
}

.blockQr p {
  text-transform: uppercase;
  font-size: 12px;
  color: var(--mobile-menu-download-text);
  font-weight: 800;
}

.menuQr {
  width: 25%;
}

.menuButtons {
  display: flex;
  gap: 10px;
}

.btnGreen {
  display: flex;
  background: var(--mobile-menu-green-btn-bg);
  color: var(--mobile-menu-green-btn-text);
  padding: 10px;
  width: 105px;
  min-height: 33px;
  border-radius: 7px;
  text-decoration: none;
  font-size: 10px;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.btnGreen:hover {
background: var(--mobile-menu-green-btn-bg-hover);
color: var(--mobile-menu-green-btn-text-hover);
}

.btnGreen img {
  width: 12px;
}

/* Search */
.mobMenuSearch {
  padding: 10px 15px;
  background: var(--mobile-menu-search-bg);
  margin-top: 3px;
}

.mobMenuSearch input {
  width: 100%;
  padding: 8px 12px 8px 40px;
  border-radius: 10px;
  color: var(--mobile-menu-search-text);
  font-size: 10px;  
  min-height: 35px;
}

.mobMenuSearch input::placeholder {
  color: var(--mobile-menu-search-text);       
  font-size: 10px;   
}

/* Menu list */
.mobMenuList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobMenuList li {
  border-top: 1px solid var(--mobile-menu-border);
  position: relative;
}

.mobMenuList li a {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  text-decoration: none;
  color: var(--mobile-menu-text);
  font-weight: 500;
  font-size: 14px;
  gap: 9px;
  padding-right: 40px;
}

.mobMenuList li a:hover{
	background: var(--mobile-menu-hover);
	color: var(--mobile-btn-text);
}

.menuImg img {
  max-width: 13px;
  max-height: 13px; 
}

.mobMenuSearch {
  position: relative;
  display: flex;
  align-items: center;
}

.menuImg {
  background: var(--mobile-btn-bg);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobMenuSearch::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background: url("../img/menu-icons/search.svg") no-repeat center;
  background-size: contain;
}

.mobMenuSearch::after {
  content: "";
  position: absolute;
  left: 45px;
  top: 25%;
  width: 1px;
  height: 50%;
  background-color: var(--mobile-menu-border);
}

.mobMenuList .submenu-toggle {
  position: absolute;
  right: 10px;
  top: 20px;
  width: 20px;
  height: 20px;
  transform: translateY(0%);
  cursor: pointer;
}

.mobMenuList .submenu-toggle::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  background: url("../img/menu-icons/arrow-blue.svg") no-repeat center;
  background-size: contain;
  transition: transform 0.4s ease;
}

.mobMenuList .submenu-toggle.active::before {
  transform: rotate(180deg);
}

.mobMenuList .submenu {
  display: none;
  padding-left: 53px;
  color: #215584;
  font-weight: 500;
  font-size: 14px;
}

.mobMenuList .submenu.open {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: static;
}

.mobMenuList .submenu li {
  border-top: none;
}




 @media screen and (max-width: 1150px) {
   .middleHead, .headBtns, .languages {
    display: none;
    }   
    .mobileMenu {
  	display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10;
    background-color: var(--mobile-menu-bg);
    border-radius: 0;
    margin: 0;
    padding: 8px 20px;
  }
  .menuToggle {
    z-index: 1100;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
  }

  .mobItemMenu {
   display: flex;
   flex-direction: column;
   gap: 3px;
   align-items: center;
  }

  .registration, .login {
    padding: 6px 10px;
    font-size: 12px;
    min-width: 50px;
}
   header {
	padding: 8px 10px;
}

  .menuTime {
   position: relative;
  }

  .menuTime::after {
    content: "";
    background: url(../img/menu-icons/arrow-blue.svg) no-repeat center;
    background-size: contain;
    width: 10px;
    height: 10px;
    transition: transform 0.4s;
}
}