@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//www.artis-logistics.ru/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.2.6") format("woff2");
}

:root {
	--wd-text-font: "Roboto", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(51,51,51);
	--wd-text-font-size: 14px;
	--wd-title-font: "Roboto Condensed", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 700;
	--wd-title-transform: uppercase;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Roboto", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Roboto", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Roboto", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Roboto", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 400;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-primary-color: #50970e;
	--wd-alternative-color: #fbbc34;
	--wd-link-color: #50970e;
	--wd-link-color-hover: #2d560f;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: #83b735;
	--btn-accented-bgcolor-hover: #6ca300;
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
}
.wd-popup.wd-age-verify {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 280px;
}
.wd-page-title {
	background-color: #50970e;
	background-image: url(http://www.artis-logistics.ru/wp-content/uploads/2020/08/bg1_misc.png);
	background-size: cover;
	background-position: center center;
}
.wd-footer {
	background-color: #404040;
	background-image: none;
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--btn-accented-box-shadow-active: none;
--btn-accented-bottom: 0px;
--wd-brd-radius: 0px;
}

@media (min-width: 1222px) {
[data-vc-full-width]:not([data-vc-stretch-content]),
:is(.vc_section, .vc_row).wd-section-stretch {
padding-left: calc((100vw - 1222px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
padding-right: calc((100vw - 1222px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
}
}


/* Основной стиль для всех полей */
.b24-form-content form > div {
  display: flex;
  flex-wrap: wrap;
	gap: 5px; /* Расстояние между элементами */
}

.b24-form-field {
  flex: 1 1 46%; /* Поля занимают 48% ширины */
  box-sizing: border-box;
}

/* Поле "Заполнить доп. информацию о грузе" на всю ширину */
.b24-form-field.b24-form-field-bool {
  flex: 1 1 100%; /* Занимает всю ширину */
}
.b24-form-content form input[type='email'],
.b24-form-content form input[type='text'] {
    margin-bottom: 0 !important; /* Переопределяет отступ для этих полей */
}

/* Стили для мобильных устройств */
@media (max-width: 768px) {
  .b24-form-content form > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Расстояние между элементами */
    flex-direction: column; /* Все элементы становятся в один столбец */
  }


  .b24-form-field {
    flex: 1 1 100%; /* Поля занимают всю ширину */
  }

  /* Убираем отступ между полями */
  .b24-form-field.b24-form-field-text, 
  .b24-form-field.b24-form-field-bool {
    flex: 1 1 100%; /* На всю ширину */
  }
}
.b24-form-control-string .b24-form-control-label, .b24-form-control-list .b24-form-control-label, .b24-form-control-text .b24-form-control-label {
    white-space: normal !important;
		}

.b24-form-control-text .b24-form-control {
    min-height: 160px !important;
    padding-top: 40px !important;
		}

/* ===== Стили для placeholder в полях ===== */
.my-calculator-wrap input::placeholder {
  color: #b0b0b0;       
  font-style: italic;   
}
.my-calculator-wrap input:focus::placeholder {
  color: transparent;  
}

/* ===== Блок с результатом (пример) ===== */
.my-calculator-wrap #result {
  background-color: #50970e;
  padding: 7px 15px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  display: none; /* скрыт по умолчанию */
  margin-top: 10px;
}


.my-calculator-wrap #message {
  background-color: #fffbe6; 
  border: 1px solid #ffe58f; 
  padding: 6px 15px;
  font-size: 14px;
  color: #ad8b00;
  display: none; /* скрыт по умолчанию */
  margin-top: 10px;
}


.my-calculator-wrap {

  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 0 20px;
  box-sizing: border-box;
}

.my-calculator-wrap .form-group {
  display: flex;       
  align-items: center;  
  margin-bottom: 10px;  
}

.my-calculator-wrap .form-group label {
  font-size: 14px;
  font-weight: bold;
  color: #555;
  background-color: #f0f0f0;
  border: 2px solid #f0f0f0;
  padding: 4px 12px;
  min-width: 100px;       /* Ширина лейбла */
  text-align: right;      /* Текст в лейбле выравниваем по правому краю */
  flex-shrink: 0;         /* Не даём лейблу ужиматься */
  box-sizing: border-box; 
}

.my-calculator-wrap .form-group input,
.my-calculator-wrap .form-group select {
  flex: 1;               /* Инпут растягивается на всю оставшуюся ширину */
  font-size: 14px;
  border: 2px solid #f0f0f0;
  color: #50970e;
  background-color: #ffffff;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.3s; 
  margin-top: 10px;       /* Отступ сверху внутри группы */
  height: 34px;
}


.my-calculator-wrap .form-group select {
  margin-bottom: 15px; 
}

.my-calculator-wrap .form-group input:focus,
.my-calculator-wrap .form-group select:focus {
  border-color: #50970e;
}


.my-calculator-wrap button {
  background-color: #50970e;
  color: #ffffff;
  border: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
  min-height: 34px;
}


.my-calculator-wrap button:hover {
  background-color: #3d7c0b;
  color: #fff;
}

.my-calculator-wrap .form-group label,
.my-calculator-wrap .form-group input,
.my-calculator-wrap button {
  border-radius: 0;
}


/**************************************************************
  2) Стили, отвечающие за новую "Grid"-разметку (раскладку секций)
**************************************************************/

/* -- Родительский блок .form9 -- */
.my-calculator-wrap .form9 {
  display: grid;


  grid-template-columns: 1fr; 
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "sec1"
    "sec3"
    "sec2";

  gap: 20px;
}

.my-calculator-wrap .section1 { grid-area: sec1; margin-top: -24px;}
.my-calculator-wrap .section3 { grid-area: sec3; margin-top: -24px; }
.my-calculator-wrap .section2 { grid-area: sec2; margin-top: -34px; text-align: right;}

/* -- Адаптивная перестройка на десктопе -- */
@media (min-width: 768px) {
  .my-calculator-wrap .form9 {
    /* Две колонки, две строки */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "sec1 sec3"
      "sec2 sec3";
  }
}

#calc-request-form {
	margin-left:15px !important;
}

/**************************************************************
  СТИЛИ ТОЛЬКО ДЛЯ ФОРМЫ ОТПРАВКИ (my-contact-wrap)
**************************************************************/

/* Внешний контейнер формы (не ломает калькулятор) */
.my-contact-wrap {
  max-width: 1200px; 
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* Грид из двух колонок */
.my-contact-wrap .contact-form-grid {
  display: grid;
  grid-template-columns: 1fr; 
  gap: 20px;
}

@media (min-width: 768px) {
  .my-contact-wrap .contact-form-grid {
    grid-template-columns: 1fr 1fr; /* Две колонки на широких экранах */
  }
}

/* Стили для placeholder */
.my-contact-wrap input::placeholder,
.my-contact-wrap textarea::placeholder {
  color: #b0b0b0;       
  font-style: italic;   
}
.my-contact-wrap input:focus::placeholder,
.my-contact-wrap textarea:focus::placeholder {
  color: transparent;  
}

/* Стили для input, textarea, select внутри .my-contact-wrap */
.my-contact-wrap input[type="text"],
.my-contact-wrap input[type="email"],
.my-contact-wrap input[type="tel"],
.my-contact-wrap input[type="number"],
.my-contact-wrap textarea,
.my-contact-wrap select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  margin-bottom: 10px; 
  border: 2px solid #f0f0f0;
  color: #50970e;     
  background-color: #fff;
  outline: none;
  transition: border-color 0.3s;
  font-size: 14px;
}

.my-contact-wrap input[type="text"]:focus,
.my-contact-wrap input[type="email"]:focus,
.my-contact-wrap input[type="tel"]:focus,
.my-contact-wrap input[type="number"]:focus,
.my-contact-wrap textarea:focus,
.my-contact-wrap select:focus {
  border-color: #50970e;
}

/* Пример стиля для label в правой колонке */
.my-contact-wrap .right-column label {
  display: block;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 5px;
  color: #555;
}

/* Кнопка */
.my-contact-wrap input[type="submit"] {
  background-color: #50970e;
  color: #fff;
  border: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  min-height: 34px;
  margin-top: 10px; 
  padding: 7px 15px;
  transition: background-color 0.3s;
}
.my-contact-wrap input[type="submit"]:hover {
  background-color: #3d7c0b;
}
.my-contact-wrap select {
	padding: 0 0 0 8px !important
}

#calc-request-form {
    margin-left: 0 !important;
}