/* Формы */
/* -------------------------------------------------------------------- */
.form .form-heading .comment { font-size: 90%; font-style: italic; }

.form input:not([type="submit"]),
.form textarea,
.form select { width: 100%; }
.form textarea { min-height: 10rem; }
.form.-horizontal .container { display: flex; align-items: center; gap: 1rem; }
.form.-horizontal .form-inputs { flex-grow: 1; }
.form.-horizontal .form-input { margin-bottom: 0; flex-grow: 1; }

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

.form-inputs > *: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-inputs.-double > .form-input { margin:0; }
.form-inputs.-double > .form-input.-double { grid-area: auto / auto / auto / span 2; }

.form-buttons { margin-bottom: 0; }
.form-buttons > * { margin:0; }

.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); }
.form .form-input.-fancy { display: flex; margin-bottom: var(--span); border: var(--input-border); }
.form .form-input.-fancy > * { margin-bottom: 0; border: none; }
.form .form-input.-fancy label { width: 30%; min-width: 200px; background: #f7f7f7; padding: 0.5rem 1rem; font-size: 90%; text-align: right; }

@media screen and (max-width: 640px) {
	.form .form-input.-fancy { flex-wrap: wrap; }
	.form .form-input.-fancy > * { flex-grow: 1; }

}

.ui-button, input[type="button"], input[type="submit"], button {
	gap: 1rem; 
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; cursor: pointer;
  text-decoration: none; white-space: nowrap; font-size: 1.6rem; margin: 0; padding: 1rem var(--span);
  border-radius: var(--border-radius); align-items: center;  height: 6rem; 
 	background: var(--button-color); color: var(--button-text-color); outline: none; border: 0;  position: relative; transition: 0.3s all;
}

.ui-button i { display: inline-block; width: 2.5rem; height: 2.5rem; background-position: center; background: var(--button-text-color); mask-repeat: no-repeat; -webkit-mask-repeat: margin-right: 0.5rem; }
.ui-button:hover, input:hover[type="button"], input:hover[type="submit"], button:hover { background: black; color: white; }
.ui-button:hover i { background: white; }

.ui-button.-mini { padding: 0.5rem 1rem; height: auto; }
.ui-button.-mini i { width: 2rem; height: 2rem; }

.ui-button.-black { --button-color: black; --button-text-color: white; }
.ui-button.-black:hover { background: var(--color-blue); --button-text-color: white; }

.ui-button.-gray { --button-color: var(--color-gray); --button-text-color: black; }
.ui-button.-gray:hover { background: var(--color-yellow); --button-text-color: black; color: black; }

.ui-button.-tag { padding: 3rem; background: white; color: black; }

.ui-button.-hollow { background: white; border: var(--input-border); color: var(--text-color); display: inline-block; }
.ui-button.-hollow:hover { background: var(--input-text-color); color: var(--input-color); }

.ui-button.-blue { --button-color: var(--color-blue); --button-text-color: white;  }
.ui-button.-blue:hover { -button-color: black; --button-text-color: white; }
.ui-button.-large { width: 100%; }

.ui-button-lg { padding-left:0; background-color: #f0f0f0; color: black; height: 5rem; display: flex; align-items: center; gap: 1rem; padding: 0; padding-right: 1rem; }
.ui-button-lg .icon { width: 5rem; height: 100%; background-color: var(--button-color); display: inline-flex; align-items: center; justify-content: center; margin-right:1rem; flex-grow: 0;}
.ui-button-lg .icon i { width: 3rem; height: 3rem; background: var(--button-text-color); }
.ui-button-lg .text { flex-grow: 1; text-align: center; }
.ui-button-lg:hover { background: var(--button-color); color: var(--button-text-color); }

.ui-button-lg.-black { --button-color: black; --button-text-color: white; }

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

.ui-input:focus, 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.4; font-style: italic; }

input[type="checkbox"] {  }
textarea { min-height: 5rem; }

/* 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-red); }

/* Select */
select { appearance: none; -webkit-appearance: none;  position: relative;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='1rem' width='1rem'%3E%3Ctext x='0' y='10' fill='black'%3E%E2%96%BE%3C/text%3E%3C/svg%3E"); 
	background-repeat: no-repeat; background-size: 1.5rem 1.5rem; background-position: calc(100% - 1rem) center;
	background-clip: border-box;}

select:focus { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='1rem' width='1rem'%3E%3Ctext x='0' y='10' fill='black'%3E%E2%96%BE%3C/text%3E%3C/svg%3E"); 
	background-repeat: no-repeat; background-size: 1.5rem 1.5rem; background-position: calc(100% - 1rem) center;
	background-clip: border-box; }

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

.vcap { display: flex; align-items: center; gap: 1rem;  }
.vcap input { border: 2px solid var(--color-red); display: flex; align-items: center; gap: 1em; margin-bottom: 0; }
.vcap-input { display: flex; align-items: center; align-content: center; margin-bottom: 2rem; font-size: 1.5rem; }
.vcap-input input { margin-bottom: 0; }
.vcap-input label { margin-bottom: 0 !important; }
.vcap-input label a { color: var(--link-color); text-decoration: underline; }
.vcap-input .error { border: 2px solid var(--color-red); }
.form-input .error { border: 2px solid var(--color-red) !important; }
.vcap_value.error ~ input { border: 2px solid var(--color-red) !important; }