/* Обычные поля */
/* -------------------------------------------------------------------- */

input[type="text"], input[type="checkbox"], input[type="password"], input[type="email"], select, textarea {
	min-height: var(--input-height); padding: 0 2rem; font-size: inherit; outline: 0; border-radius: var(--border-radius); border: 1px solid transparent; 
  display: flex; align-items: center;  color: var(--color-black); overflow: hidden; background-color: var(--input-color); transition: all .3s; }

input[type="text"]::placeholder, input[type="checkbox"]::placeholder, select, textarea::placeholder {
	color: #111; font-weight: 400;
}

input:focus[type="text"], input:focus[type="checkbox"], input:focus[type="password"], input:focus[type="email"], select:focus, textarea:focus {
	border-color: var(--color-blue); box-shadow: var(--shadow); border:var(--input-active-border); }

input[type="text"]:focus, input[type="checkbox"]:focus, select:focus, textarea:focus { background: white; box-shadow: var(--shadow); border: 1px solid #0005; }
input[type="text"]::placeholder, textarea::placeholder { opacity: 0.3;   }

textarea { min-height: var(--input-height); padding: 1rem 2rem; }

/* Checkbox */
/* -------------------------------------------------------------------- */
input[type="checkbox"] { cursor: pointer; width: 2rem; height: 2rem; appearance: none; -webkit-appearance: none;
	border: none; background: white; padding: 0; max-width: var(--span); position: relative; margin-right: 1rem; display: inline-block;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0; min-height: 1rem; }  
input[type="checkbox"]:checked::after { display: inline-block; content: ''; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; background: var(--color-blue); }

/* Select */
/* -------------------------------------------------------------------- */
select { appearance: none; -webkit-appearance: none;  position: relative;	background: url(../img/icons/select-down.png) calc(100% - 1rem) center  no-repeat; }
select:focus { background: url(../img/icons/select-up.png) calc(100% - 1rem) center no-repeat; }

input:disabled, select:disabled, textarea:disabled { opacity: 0.7; }



/* Формы */
/* -------------------------------------------------------------------- */
.form input:not([type="submit"]), .form textarea, .form select { width: 100%; }
.form textarea { min-height: 10rem; }

body.-safari .form.-horizontal > * { margin: 0.5rem; }

.form > *:not(:last-child) { margin-bottom: var(--span); }
.form-inputs.-double { 	display: grid; grid-template-rows: auto; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); justify-content: center; gap: var(--span); }

@media screen and (max-width: 640px) {
	.form-inputs.-double { display: flex; flex-flow: column; }
	.form .container { flex-wrap: wrap; justify-content: center; }
}

.form-input.-required label::after { content: '*'; display: inline; color: var(--color-red); }
.form-input.-error label { color: var(--color-red);  }
.form-input.-error input, .form-input.-error select, .form-input.-error textarea {
 --input-border: 2px solid var(--color-red);
}

.form .form-input { margin-bottom: var(--span); flex-wrap: wrap; }
.form .form-input label { font-weight: normal; margin-bottom: 0.5em; display: block; font-style: italic; }

.form .form-heading { margin-bottom: var(--span); }
.form .radio-group { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; flex-grow: 1; }
.form .radio-item { display: inline-flex; align-items: center; gap: 1rem; }
.form .radio-item input { width: auto; }


.button {
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; cursor: pointer;
  text-decoration: none; white-space: nowrap; font-size: 1.8rem; margin: 0; padding: 1.5rem var(--span);
  border-radius: var(--border-radius); align-items: center;  height: var(--button-height);

 	background: var(--button-color) !important; color: var(--button-text-color) !important;
 	outline: none; border: 0; position: relative; transition: 0.3s all; text-decoration: none !important; gap: 1rem; 	font-style: normal; 
}

.button i[data-icon] { background: var(--button-icon-color) !important; width: 2.5rem; height: 3rem; }
.button i { display: inline-block;  margin:0 1rem; }

.button:hover {
	--button-color: var(--button-hover-color) !important; --button-text-color: var(--button-hover-text-color) !important;
	--button-icon-color: var(--button-hover-icon-color) !important;
}


.button[data-button~="mini"] { padding: 0.5rem 1rem; height: auto; font-size: 1.5rem;}
.button[data-button~="narrow"] { height: 3.5rem; font-size: 1.5rem; padding-left: 0.5rem; padding-right: 0.5rem;  }
.button[data-button~="narrow"] i { width: 2rem; height: 2rem; flex-grow: 0; margin: 0; }

.button[data-button~="blue"] {
	--button-color: var(--color-blue); --button-text-color: white; --button-icon-color: white;
	--button-hover-color: black; --button-hover-text-color: white; --button-hover-icon-color: white;
}

.button[data-button~="white"] {
	--button-color: white; --button-text-color: var(--color-black); --button-icon-color: var(--color-black); 
	--button-hover-color: var(--color-light-gray);
}

.button[data-button~="yellow"] {
	--button-color: var(--color-yellow); --button-text-color: var(--color-black); --button-icon-color: var(--color-black); 
	--button-hover-color: black; --button-hover-icon-color: white; --button-hover-text-color: white; 
}

.button[data-button~="round"] { border-radius: 99em; }
.button[data-button~="hollow"] { border: 2px solid var(--button-color); color: var(--button-color) !important; background: transparent !important; }
.button[data-button~="hollow"] i { background: var(--button-color) !important; }

.button[data-button~="gray"] {
	--button-color: var(--color-light-gray); --button-text-color: var(--color-black); --button-icon-color: var(--color-black); 
	--button-hover-color: black; --button-hover-text-color: white; --button-hover-icon-color: white;
}

.button[data-button~="inverted"] { border: 3px solid var(--button-color); background: transparent !important; color: var(--text-color) !important; }
.button[data-button~="inverted"] i { background: var(--button-color) !important; }

.small-button { display: inline-flex; gap: 1rem; align-items: center; justify-content: center; border: 2px solid var(--color-blue); height: var(--input-height); padding: 0.5rem 1rem; text-decoration: none !important; }


input.error { border: 1px solid red !important; }

 
.icon-button { display: inline-flex; align-items: center; gap: 1rem; text-decoration: none; font-size: 1.6rem; color: var(--button-text-color); padding: 0; padding-right: 2rem; background: var(--button-color); height: var(--button-height);  box-shadow: 0 0 25px 0 #188e4940; text-decoration: none !important; }
.icon-button .icon { display: block; width: var(--button-height); height: 100%; background: var(--button-hover-color); display: flex; align-items: center; justify-content: center; }
.icon-button i[data-icon] { width: 3rem; height: 3rem; background: var(--button-color); transition: .3s; }
.icon-button:hover { text-decoration: none; background: var(--button-hover-color);  color: var(--button-color); }


/* Капча */
/* -------------------------------------------------------------------- */
.vcap-input { display:flex; align-items:center; align-content:center; margin-bottom:1rem; flex-wrap: wrap; gap: 1rem; }
.vcap-input label { margin-bottom:0 !important; font-weight: normal; flex-basis: 100px; flex-grow: 1; }
.vcap-input a { color: var(--link-color); text-decoration: underline; }
.vcap-input .vcap { appearance: none; width: 2rem; height: 2rem; border: 2px solid #aaa; padding: 0; outline: none; }
.vcap-input .vcap::before { border:none; left: 4px; top: 4px; right: 4px; bottom: 4px;  background: transparent; width: auto; height: auto; content: ''; display: block; position: absolute;}
.vcap-input .vcap::after { display: none !important; }
.vcap-input .vcap:checked::before { background: var(--color-blue); }
.vcap-input.-error .vcap { border-color: red; }
.vcap-input .vcap_question { display: none; }
.vcap_question { flex-basis: 100%; border: 1px solid #e0e0e0; padding: 1rem; }
.vcap_question .title { font-size: 16px; font-weight: bold; margin-bottom: 15px; }
.vcap_question .confirm-button { margin-top: 1rem; }
.vcap_question .variants { display: flex; gap: 1rem; align-items: center; justify-content: start; flex-wrap: wrap; }
.vcap_question .variants .variant { display: inline-block; padding: 0.5rem 1rem; font-size: 16px; border-radius: 0; background: #f0f0f0; cursor: pointer; transition: .3s; }
.vcap_question .variants .variant:hover { background: #e0e0e0; }
.vcap_question .variants .variant.-active { background: #3c60b3; color: white; }

.vcap_value.error + input { border: 1px solid red !important; }