﻿section{
    width:90%;
	margin:0 auto;
	overflow:hidden;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background-color:#FFFFFF;
    margin:0;
    padding:0;
    color:#333333;
    font-size:1em;
	display: flex;
	flex-direction: column;
	min-height: 100vh;

}
html,body{
	height: 100%;
}
header{
	/*background-color:#D5D5D5;*/
	background: linear-gradient(to right, #9A9A9A 10%, #D5D5D5 90%);
}

header section{
   	display: flex;
  	justify-content: space-between;
  	align-items: center;
}
header section img{
	align-self: flex-start;
	margin-top:8px;
	margin-bottom:8px;
	cursor: pointer;
}
div.logoslog{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	width: fit-content;
}
.headp{
	font-weight: bold;
	font-size: 1.4em;
	padding-left: 30px;
	/*color: #000000;*/
	color: #f0f0f0;
}
.conthead{
  	display: flex;
  	flex-direction: column;
  	align-items: flex-end;
  	width: fit-content;

}

.conthead p{
	margin:8px;

}
.conthead a{
	text-decoration: none;
	color:#333333;
	font-size: 1em;
	transition: font-size 0.2s;
}

.conthead a:hover{
	color: #f6f6f6;
	font-size: 1.1em;
}

.conthead2 a{
	border: #f0f0f0 2px solid;
	background-color: #1d1c1c;
	border-radius: 10px;
	padding:10px 15px;
	text-decoration: none;
	color:#f0f0f0;
	font-size: 1em;
	transition: font-size 0.6s;
}

header button:hover{
	color: #050505;
	font-size: 1.2em;
}
div.headblock{
	background-color: #040404;
	color:#F5F4F4;
	min-height:122px;
	/*background-image: url("img/headfonvin.png");
	background-repeat: no-repeat;
  	background-position: center;
  	background-size: cover;*/
}

div.headblock section{
	padding: 18px 0;
}

div.headblock section p{
	padding-top:0px;
	padding-bottom:0px;
	color: #eeeeee;
}

div.headblock section p:nth-of-type(1){
	font-size:1.4em;
	font-weight:bold;
	margin: 0 0;
	margin-bottom: 10px;
}

div.headblock section p:nth-of-type(2){
	font-size:1.2em;
	line-height:25px;
	margin:8px 0;
}


div.contform{
	/*background-color: #721919;*/
	background-image: url("img/vinfon1.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: calc(100% - 100px); /* 100% высоты минус высота header и footer */
}
.loginform{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 70vh;

}
/*div.message{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	color: #eeeeee;
	margin-top: 20px;
}

div.message a{
	color: #eeeeee;
	/*text-decoration: none;
	margin-left: 4px;
}*/

p.mess{
	color:#eeeeee ;
	display: flex;
	flex-direction:row;
	justify-content: center;
}
.form-container {
  margin:20px auto;
  width: 300px;
  height: 340px;
  background-color: #BC2A2A;
  background-color: rgba(188, 0, 0, 0.3);
  border-radius:20px;
  padding: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  /*justify-content: space-around;*/
  align-items: center;
	color: #eeeeee;
	margin-top: 10px;

}
.form-container form{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
 }

.form-container img{
	margin:28px;
}
.input-field {
  width: 100%;
  margin: 12px 0;
  padding: 10px;
  border: none;
  background-color:#eeeeee;
  border-radius:8px;
}

.submit-button {
  width: 60%;
  margin-top:36px;
  padding: 10px;
  background-color:#161414;
	color:#eeeeee;
  border: none;
  cursor: pointer;
  border-radius:8px;
}
.submit-button:hover {
	background-color: #212121;
}
.btnform{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

}

.btn2{
	padding: 6px 14px;
	margin-bottom:26px;
  	border: 1px solid #a0a0a0;
  	border-radius:6px;
  	color: #a0a0a0;
  	background-color: transparent;
  	font-size: 14px;
  	cursor: pointer;
  	margin-top:14px;
  	margin-right:8px;

}

footer{
	background-color:#040404;
	color:#eeeeee;
	margin-top: auto;
}

footer section{
   	display: flex;
  	justify-content: space-between;
  	align-items: center;
}
footer a{
	text-decoration: none;
	color:#eeeeee;
}
div.contfoot{
	display: flex;
  	flex-direction: column;
  	align-items: flex-end;
  	width: fit-content;
}







/*СТРАНИЦА РЕГИСТРАЦИИ*/
div.reg{
	background-color: #171717;
	background-image: url("img/vinfon1.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	min-height: 78%;
	height: calc(100% - 100px);
}
.divreg{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 75vh;
	margin-top: 20px;

}
.password-checkbox{
	text-align: center;
}
div.registr{
	background-color: rgba(188, 0, 0, 0.3);
	color: #eeeeee;
	width:400px;
	margin:0 auto;
	margin-top: 6px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 20px;
	text-align: center;


}
.form-group {
	margin-bottom: 14px;
	margin-top: 14px;
	display: flex;
	justify-content: center;
}


.form-group input {
	margin-top: 0px;
	width:220px;
	height: 36px;
	padding: 5px;
	border: none;
	border-radius: 5px;
}

.form-group button {
	width: 220px;
	height: 40px;
	border: none;
	border-radius: 5px;
	background-color: black;
	color: white;
	font-size: 0.9em;
	cursor: pointer;
	margin-top: 6px;
}
.form-group button:hover {
	background-color: #212121;
}







/*СТРАНИЦА ВОССТАНОВЛЕНИЯ ПАРОЛЯ*/
div.vostpass{
	background-color: #171717;
	background-image: url("img/vinfon1.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	min-height: 78%;
	height: calc(100% - 100px);

}
div.formrecoverypass{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-items: center;
	height: 80vh;

}
form.recoverypass {
	max-width: 400px;
	margin: 24px auto;
	padding: 20px;
	border-radius: 10px;
	color:#eeeeee;
	background-color: rgba(188, 0, 0, 0.3);
/*background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 28%, rgba(188, 0, 0, 0.3) 72%);*/

}
.recoverypass p{
	margin-top:0;
	margin-bottom: 28px;
	line-height: 22px;

}
.recoverypass label {
margin-bottom: 10px;
display: block;
max-width: 200px;
}
.recoverypass input{
width: 70%;
padding: 8px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.recoverypass button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color:#161414;
color: #fff;
cursor: pointer;
}
.recoverypass button:hover {
background-color: #212121;
}






/*СТРАНИЦА НОВОГО ПАРОЛЯ*/
div.newpass{
	background-color: #171717;
	background-image: url("img/vinfon1.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	min-height: 78%;
	height: calc(100% - 100px);
}
.divnewpass{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 75vh;
}
.password-checkbox{
	text-align: center;
}
div.npass{
	background-color: rgba(188, 0, 0, 0.3);
	color: #eeeeee;
	width:400px;
	margin:0 auto;
	margin-top: 40px;
	padding-top: 26px;
	padding-bottom: 10px;
	border-radius: 20px;
	text-align: center;


}
.npass.form-group {
	margin-bottom: 14px;
	margin-top: 14px;
	display: flex;
	justify-content: center;
}


.npass.form-group input {
	margin-top: 0px;
	width:220px;
	height: 40px;
	padding: 5px;
	border: none;
	border-radius: 5px;
}

.npass.form-group button {
	width: 220px;
	height: 40px;
	border: none;
	border-radius: 5px;
	background-color: black;
	color: white;
	font-size: 0.9em;
	cursor: pointer;
	margin-top: 10px;
}


/*СТАРТОВАЯ СТРАНИЦА*/

div.headblock2{
	color:#F5F4F4;
	font-size: 1.1em;
	background-image: url("img/headfonvin.png");
	background-repeat: no-repeat;
  	background-position: center;
  	background-size: cover;
}

.btn1 {
	padding: 6px 20px;
	border: 2px solid white;
	border-radius:6px;
	color: white;
	background-color: transparent;
	font-size: 16px;
	cursor: pointer;
	margin-top:16px;
	margin-bottom: 20px;
	margin-right: 10px;

}


.btn1:hover{
	background-color: rgba(255, 255, 255, 0.3);
}

.contheadfull{
	display: flex;
	flex-direction:row;
	justify-content: flex-end;

}

.conthead2{
	display: flex;
	justify-content: flex-end;
	align-items:center;
	margin-left: 24px;
}


div.search{
	color: #ececec;
	background-color: rgba(89,3,0,0.93) ;
	/*background-image: url("img/vinfon1.png");
	background-repeat: no-repeat;
	background-position: center;*/
	margin:0;
	/*padding-bottom: 20px;*/
	text-align: center;
}

div.conthead0{
	margin: 0;
	display: flex;
	align-items:center;
	margin-left: 24px;
}


.searchtable{
	border: 1px solid #eee;
	border-radius: 5px;
	table-layout: fixed;
	width: 100%;
	margin-bottom: 20px;
	background-color: #fafafa;
}
.searchtable th {
	font-weight: bold;
	padding: 5px;
	background: #efefef;
	border: 1px solid #dddddd;
	border-radius: 5px;
}
.searchtable td{
	padding: 5px 10px;
	border: 1px solid #eee;
	text-align: left;
	word-break: break-all;
}
.searchtable tbody tr:nth-child(odd){
	background: #fff;
}
.searchtable tbody tr:nth-child(even){
	background: #F7F7F7;
}



/*ВАСЯ стили поисковой строки*/

searchform {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
}

.searchform input[type=search] {
	font-size: 15px;
	height: 36px;
	width: 300px;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
	transition: border-color 0.3s;
}

.searchform input[type=search]:focus {
	border-color: #0a0a0a;
	outline: none;
}

.searchform input[type=submit] {
	font-size: 15px;
	height: 36px;
	width: 80px;
	margin-left: 10px;
	background-color: #0a0a0a;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s;
}

.searchform input[type=submit]:hover {
	background-color: #252525;
}

/* Таблица Корзина */

.basket {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	font-family: Arial, sans-serif;
}

.basket th, .basket td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left;
}

.basket th {
	background-color: #f2f2f2;
	color: #333;
	font-weight: bold;
}



.basket td textarea {
	width: 100%;
	resize: vertical; /* Позволяет изменять размер по вертикали */
}

.basket input[type=checkbox] {
	transform: scale(1.5); /* Увеличивает размер чекбокса */
	margin-right: 10px; /* Отступ справа от чекбокса */
}


.basketbtn {
	width: 200px; /* Ширина кнопки */
	height: 40px; /* Высота кнопки */
	font-size: 1.2em; /* Размер шрифта кнопки */
	background-color: #651512; /* Цвет кнопки */
	color: #f9f9f9;
	border: none;
	cursor: pointer;
	border-radius: 5px; /* Закругленные углы кнопки */
	margin-right: 30px ;
	margin-bottom: 40px;
}
.basketbtn:hover {
	background-color: #800000; /* цвет при наведении */
}



/*СТИЛИ ТАБЛИЦА ЗАКАЗОВ*/
.order {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	background-color: #ffffff;
	margin-bottom: 20px;
	font-size: 14px;
}

.order th, .order td {
	padding: 4px;
	text-align: left;
	border-bottom: 1px solid #ddd;
}

.order th {
	background-color:#651512;
	color: white;
	font-weight: bold;

}

.order tr:hover {
	background-color: #f1f1f1;
}




a.balance{
	text-decoration:none;
	color:#FFFFFF;
	background-color:rgba(255,255,255,0.3);
	padding:6px 30px;
	border-radius: 6px;
}

a.balance:hover{
	background-color: rgba(255, 255, 255, 0.7);
}