/* Start:/local/templates/vent_template/components/bitrix/catalog.element/element_config/style.css?17835997327486*/
.vnt-page {
  padding: 24px 0 90px;
  --brand: #007DFF;
  --brand-dark: #1e4ad6;
  --line: #e3e6ec;
  --line-strong: #c9cfd9;
  --text: #1c2230;
  --muted: #6c757d;
  --dark-bg: #0e1218;
  --code-green: #A8E879;
  --bg-soft: #f6f7f9;
  color: var(--text);
}

/* ===== Configurator ===== */
.vnt-configurator { margin-bottom: 48px; 	font-family: "Montserrat";
}
.vnt-row {
	position: relative;
}
.vnt-props {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: min-content;
	grid-column-gap: 48px;
	grid-row-gap: 0px;
}
/* Позиции ячеек задаёт script.js: столбцы читаются сверху вниз (сначала левый,
   потом правый); правый столбец начинается с 3-й строки — верх занят «Кодом заказа» */

.vnt-prop { margin-bottom: 28px; }
.vnt-prop-label {
  font-size: 14px;
    font-weight: 500;
    color: #0C0C2D;
    margin-bottom: 20px;
}

.vnt-tiles { 
	display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px 16px;
		width:100%;
}
.vnt-tile {
      padding: 12px 13px 13px;
    border: 1px solid #CDCDD6;
    font-size: 14px;
    font-weight: 500;
    color: #0C0C2D;
    background: #fff;
    cursor: pointer;
		font-family: "Montserrat";
    -webkit-transition: all .3s;
    transition: all .3s;
}
.vnt-tile:hover:not(:disabled) {
  border-color: var(--brand);
  color: #fff;
	background:var(--brand);
}
.vnt-tile.active {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
  box-shadow: 0 1px 2px rgba(41, 98, 255, 0.18);
}
.vnt-tile.disabled, .vnt-tile:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--bg-soft);
  pointer-events: none;
	display: none;
}

.vnt-select {
  width: 100%;
  padding: 14px 44px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 0px;
	font-size: 16px;
	font-family: "Montserrat";
	font-weight: 500;
	color: #0C0C2D;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231c2230' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.vnt-select option {
  color: #333333;
  background-color: #ffffff;
  padding: 12px; /* Note: Ignored by some operating systems */
}
.vnt-select:focus { outline: none; border-color: var(--brand); }
.vnt-select:hover { border-color: var(--line-strong); }

.vnt-input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  font-size: 15px;
  color: var(--text);
  background-color: white;
  font-weight: 500;
  box-sizing: border-box;
}
.vnt-input:focus { outline: none; border-color: var(--brand); }
.vnt-input:hover { border-color: var(--line-strong); }
.vnt-input-hint {
  margin-top: 6px;
  font-size: 12px;
  color: #6a7280;
}

.vnt-code-box-absolute {
    position: absolute;
    top: 0;
    width: calc(50% - 24px);
    right: 0;
}
.vnt-code-box {
		background: #0C0C2D;
    padding: 24px 30px 33px;
    max-width: 100%;
}
.vnt-code-label {
		font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
}
.vnt-code {
  font-size: 24px;
    font-weight: 600;
    color: #A8E879;
    color: #A8E879;
    max-width: 95%;
    margin-bottom: 50px;
}
.vnt-actions { display: flex; gap: 24px; }
.vnt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
	text-decoration: underline;
  text-transform: uppercase;
	font-family: "Montserrat";
  transition: all 0.15s;
}
.vnt-btn::before {
  content: '';
  display: inline-block;
  width: 16px; height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.vnt-btn-copy::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3e%3crect x='9' y='9' width='13' height='13' rx='2'/%3e%3cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3e%3c/svg%3e");
}
.vnt-btn-add::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3e%3cpath d='M9 11l3 3L22 4'/%3e%3cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3e%3c/svg%3e");
}
.vnt-btn:hover:not(:disabled) { color:#A8E879; }
.vnt-btn:disabled { opacity: 0.35; cursor: not-allowed; }


.vnt-warn {
  padding: 20px;
  background: #fff9e6;
  border-left: 4px solid #f5a623;
  margin: 20px 0;
  border-radius: 4px;
}
@media (max-width: 900px) {
  .vnt-row { grid-template-columns: 1fr; gap: 24px; }
	.vnt-code-box-absolute {
			position: fixed;
			bottom: 0;
			width: 100%;
			right: 0;
			left: 0;
			top: initial;
			border-radius: 16px 16px 0 0;
			overflow: hidden;
			z-index: 9;
	}
	.vnt-code-label {
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 12px;
	}
	.vnt-code {
			font-size: 16px;
			font-weight: 600;
			color: #A8E879;
			max-width: 95%;
			margin-bottom: 12px;
	}
	.vnt-btn {
			font-size: 12px;
        font-weight: 600;
        border: 1px solid #fff;
        border-radius: 25px;
        text-decoration: none;
        padding: 12px 10px;
        width: 100%;
        /* text-align: center; */
        margin: 0 10%;
        justify-content: center;
	}
	.vnt-btn.vnt-btn-copy {
		display: none;
	}
	.vnt-props {
    display: block;
	}
	.vnt-code-box {
			background: #0C0C2D;
			padding: 24px 25px;
			max-width: 100%;
			text-align: center;
	}
	.vnt-actions {
			justify-content: center;
			align-items: center;
	}
}

/* ==== Чекбоксы конфигуратора (ui=checkbox), стиль как .custom-checkbox из референса клиента ==== */
.vnt-checks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vnt-check {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    font-weight: 500;
    color: #0C0C2D;
}
.vnt-check-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.vnt-check-label {
    display: inline-flex;
    align-items: center;
}
.vnt-check-label::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    flex-grow: 0;
    border: 1px solid #CDCDD6;
    border-radius: 0;
    margin-right: 8px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
}
.vnt-check-input:checked + .vnt-check-label::before {
    border-color: #0b76ef;
    background-color: #0b76ef;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
.vnt-check-input:not(:disabled):not(:checked) + .vnt-check-label:hover::before {
    border-color: #007DFF;
}
.vnt-check-input:not(:disabled):active + .vnt-check-label::before {
    background-color: #007DFF;
    border-color: #007DFF;
}
.vnt-check.disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* End */
/* /local/templates/vent_template/components/bitrix/catalog.element/element_config/style.css?17835997327486 */