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

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

::placeholder { color: #ccc; opacity: 1; }


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; }


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-green); }

/* 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); }
.form .form-input label { font-weight: normal; margin-bottom: 0.5em; display: block; font-size: 90%; }
.form .form-heading { margin-bottom: var(--span); }

.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: 1rem; align-items: center;  height: var(--button-height);
 	background: var(--button-color); 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; 
}

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

.button:hover { --button-color: var(--button-hover-color); --button-text-color: var(--button-hover-text-color); border: none; --button-icon-color: white; }
.button i[data-icon] { background: var(--button-icon-color); width: 3rem; height: 2rem; }
.button i { display: inline-block;   }

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

.button[data-button~="red"] { --button-color: var(--color-red); --button-text-color: white; --button-icon-color: white;}
.button[data-button~="mini"] { padding: 0.5rem 1rem; height: auto; font-size: 1.5rem;}
.button[data-button~="narrow"] { height: 4rem; }


.link-button { display: flex; align-items: center; gap: 1rem; }
.link-button i { width: 2.5rem; height: 2.5rem; background: var(--color-orange); }
 
.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; height: var(--button-height);  text-decoration: none !important; }
.icon-button .icon { display: block; width: var(--button-height); height: 100%; background: black; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; }
.icon-button i[data-icon] { width: 2rem; height: 2rem; background: white; transition: .3s; }
	.icon-button:hover .icon { background: white; }
	.icon-button:hover i[data-icon] { background: black; }

.button.-large { width: 100%; }
.button.-large i { width: 3rem; height: 3rem; }

.button.-disabled { opacity: 0.7; pointer-events: none; filter: grayscale(100%); }

/* Капча */
/* -------------------------------------------------------------------- */
.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 a:hover { text-decoration: none; }

.vcap-input .vcap { appearance: none; width: 3rem !important; height: 3rem; padding: 0; outline: none; border-radius: 0.4rem; flex-basis: 3rem; flex-shrink: 0; max-width: none; border: 2px solid transparent; }
.vcap-input .vcap::before { border:none; width: 60%; height: 60%; left: 50%; top: 50%; background: transparent; content: ''; display: block; position: absolute; transform: translate(-50%, -50%); border-radius: 0.4rem; }
.vcap-input .vcap::after { display: none !important; }
.vcap-input .vcap:checked::before { background: var(--color-red); }

.vcap-input.error .vcap { border: 2px solid red; }
.vcap_value.error + input { border: 1px solid red !important; }
.vcap-puzzle { position: relative; width: 100%; height: 100%; max-width: 40rem; min-width: 20rem; min-height: 20rem; border: 1px solid #0002; padding: 10px; box-shadow: inset 0px 0px 10px 0 #0002; margin-bottom: 2rem; }
.vcap-puzzle-container { text-align: center; }
.vcap-heading { text-align: center; max-width: 80%; line-height: 1.3; margin: 0 auto; margin-bottom: 20px; }
.vcap-heading .title { font-size: 17px; font-weight: bold; }
.vcap-heading .subtitle { font-size: 15px;  }
.vcap-point { display: flex; position: absolute; border-radius: 50%; width: 3.5rem; height: 3.5rem; font-size: 1.5rem; font-weight: bold; border: 4px solid white; box-shadow: 0 0 5px 0 #0003; cursor: pointer;  justify-content: center; align-items: center; }
.vcap-point.-active { background: #67b31a; color: white;  }