/* ГЛАВНАЯ СТРАНИЦА */
/*https://habr.com/ru/articles/467049/*/
body {
background-color: #f6f6ff;
}

div.container-jweight {
min-height: 100vh;
max-width: 1200px;
margin: 0 auto;
}

/* ОДНОКОЛОНОЧНИК */
div.column-1 {

  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}



div.way {
  flex: 1;
 }
 
div.ur {
  flex: 1;
 }
 
div.column-3 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  }

div.c3-1 {
  min-width: 346px;
  max-width: 350px;
  min-height: 150px;
  padding: 10px;
}


div.column-2 {
  max-width: 1200px;
  background-color: #f1f1ff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 15px;
}

div.c2-1 {
  flex: 2;
  padding: 15px;


}

div.c2-2 {
  flex: 1;
  padding: 15px;
  margin: 0 auto;
}


div.map {
    max-width: 320px;
  margin: 0 auto;
}

/* ЗАГОЛОВКИ */
h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: calc((100vw - 320px)/(1200 - 320) * (29 - 24) + 24px);
  color: #333333;
  font-weight: lighter;
}

h2 {
  font-family: 'Open Sans', Arial, sans-serif;
  font-style: normal;
  font-size: calc((100vw - 320px)/(1200 - 320) * (29 - 24) + 24px);
  color: #000000;
  font-weight: lighter;
}

h2.news {
  font-family: 'Open Sans', sans-serif;
  font-size: calc((100vw - 320px)/(1200 - 320) * (14 - 12) + 12px);
  font-weight: bold;
}

h2.price {
  font-family: 'Open Sans', sans-serif;
  font-size: calc((100vw - 320px)/(1200 - 320) * (18 - 12) + 12px);
  font-weight: bold;
  color: white;
}

h3 {
  font-family: 'Open Sans', sans-serif;
  font-size: calc((100vw - 320px)/(1200 - 320) * (20 - 14) + 14px);
  color: #333333;
  font-weight: bold;
}

h3.bank {
  font-family: 'Open Sans', sans-serif;
  font-size: calc((100vw - 320px)/(1200 - 320) * (17 - 14) + 14px);
  color: #333333;
  text-align: right;
}



/* ПРОСТРАНСТВО */
div.space1 {
  height: 40px;
}

div.space2 {
  height: 20px;
}

div.space3 {
  height: 5px;
}


div.sp-news {
  height: 300px;
}

/*ТУПА ШАПКА НАХУЙ*/
div.head-line-1-color {
background-color: #f6f6ff;
}

div.head-line-1 {
max-width: 1200px;
max-height: 150px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-end;
margin: 0 auto;

}

div.hl-inner {
background-color: #b3fbb0;
padding-right: 5px;
padding-left: 5px;
margin-right: 5px;
border-radius: 10px;
margin-top: 3px;
}


div.head-line-2-color {
background-color: #e8e8ff;
}

div.head-line-2 {
max-width: 1200px;
height: 144px;
margin: 0 auto;

display: flex;
justify-content: space-between;
align-items: flex-start;
}

div.m-logo {
display: flex;
flex-wrap: nowrap;
}

div.m-logo-png {
margin-top: 10px;
}

div.m-logo-text {
margin-top: 10px;
}

div.bankofblood {
margin-top: 10px;
}


@media (max-width:1200px) {
	div.m-logo {
		display:none;
		}
		}

@media (max-width:1200px) {
	div.head-line-2 {
	height: 70px;
	}
}



/*ПОДВАЛ НАХУЙ СУКА БЛЯТЬ!!!*/
div.footer-c {
height: 150px;
background-color: #e8e8ff;
margin: 0px;
display: flex;
justify-content: center;
align-items: flex-end;

}
div.footer-line-text {
margin-bottom: 15px;
}

/* ПРАЙС СУКА НАХУЙ БЛЯТЬ!!!!!!!!! */
div.column-5 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;

 }
div.col-1 {
flex: 1;


}
div.col-2 {
flex: 5;

}
div.col-3 {
flex: 1; 

}
div.col-4 {
flex: 1;

}
div.col-5 {
flex: 1;

}
div.col-6 {
flex: 0;

}

div.table-part {
box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.5)
}


div.column-4 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
 }
 div.col-11 {
  flex: 4;
}
 div.col-12 {
  flex: 1;
}
 div.col-13 {
  flex: 4;
}
 div.col-14 {
  flex: 1;
}
div.cont-green {
background-color: #b3fbb0;
}
div.cont-gray {
background-color: #f1f1ff;
}
div.cont-blue {
background-color: #25507f;
}
div.price-h {
flex: 1;
}

div.cont-blue-gray {
background-color: #e8e8ff;
}
div.price-h-2 {
flex: 1;
}

div.cont-acc {
background-color: #f7f7f7;
margin: 0;
padding: 0;
}
div.cont-acc-no {
background-color: #fff;
margin: 0;
padding: 0;
}

/* ПОДСКАЗКА */
[data-title] {
    position: relative;
    cursor: help;
}

[data-title]::after {
    content: attr(data-title);
    position: absolute;
    left: 100%; /* Появляется справа от элемента */
    top: 50%;
    transform: translateY(-50%); /* Вертикальное центрирование */
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
    background: #003366;
    color: #fff;
    padding: 0.5em ; /* Увеличиваем padding для ширины */
    border-radius: 15px; /* Закругленные углы */
    min-width: 100px; /* Минимальная ширина */
    max-width: 300px; /* Максимальная ширина */
    white-space: pre-wrap; /* Перенос длинного текста */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Легкая тень */
    margin-left: 10px; /* Отступ от курсора */
}

[data-title]:hover::after {
    opacity: 1;
}



section.pri-table {
max-width: 1040px;
}

div.quality-d {
	background-color: #f1f1ff;
	}
	/* Блок сообщения */
.alert {
    padding: 25px;
    background-color: #e8e8ff;
	margin-bottom: 5px;
	width: 40%;
	border-radius: 20px;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
	position: fixed;
	left: 40px;
	bottom: 30px;
	z-index: 100;
	
}

/* Крестик */
.closebtn {
    margin-left: 15px;
    color: black;
    font-weight: bold;
    float: right;
    font-size: 26px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}


/* Деталис */

details {
	  font-family: 'Open Sans', sans-serif;
}


/* поиск */

/*ЛИНИЯ ПОИСК*/
div.search-v-color{
	background-color: #f6f6ff
}
div.search-v {
	max-width: 1200px;
	margin: 0 auto;
}

form.d-flex {
display: inline flex;
width: 100%;
}

button.search {
	appearance: none;
	border: 0;
	border-radius: 3px;
	background: #4676D7;
	color: #fff;
	padding: 5px 12px;
	margin: 5px;
	}
	
	button.search:hover {
	background: #1d49aa;
}
	button.search:focus {
  outline: none;
  box-shadow: 0 0 0 4px #cbd6ee;
}

	input.search {
	border: 0;
	border-radius: 3px;
	padding: 5px 12px;
	margin: 5px;
	width: 100%

	}

.highlighted {
	background-color:#f1f100
	}

/* ФОРМА */
/* Общие стили для навигации (десктоп) */
nav  {
    background: #e8e8ff;
    padding: 10px 0;
    text-align: right;
}

nav a {
    color: #333;
    margin-right: 25px;
    text-decoration: none;
}

nav a:hover {
    text-decoration: #333 underline;
    text-underline-offset: 16px;
    font-weight: bold;
    color: #2783e6;
}

/* ЛИНИЯ НАВБАР */
.navbar-color {
  background-color: #e8e8ff;
}
.navbar {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: 333;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
      text-align: right;
}

.nav-links a {
  color: 333;
  text-decoration: none;
}

/* Скрываем кнопку гамбургера на десктопе */
.hamburger {
  display: none;
  background: none;
  border: none;
  color: #333333;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Мобильная версия (ширина ≤ 768px) */
@media (max-width: 1200px) {
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%; /* Скрываем меню за пределами экрана */
    width: 70%;
    height: 100vh;
    background-color: #e8e8ff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    transition: right 0.3s ease-in-out; /* Плавное появление */
    z-index: 100;
  }

  /* Класс, который "выдвигает" меню на экран */
  .nav-links.active {
    right: 0;
  }

  /* Показываем кнопку гамбургера */
  .hamburger {
    display: flex;
    z-index: 101; /* Чтобы была поверх меню */
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
  }

  /* Затемнение фона при открытом меню */
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }

  .overlay.active {
    opacity: 1;
    visibility: visible;
  }
}


.close-alert-btn {
    float: right;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}


.ya-share2 {
    padding: 5px;
    border-radius: 15px;
    background-color: #e8e8ff;
    margin-left: auto;
    text-align: left;
	border-radius: 15px;
	box-shadow: 0px 0px 1px 1px rgba(199, 199, 199, 1);
}

img.material {
width: 28px;
height: auto;
}