/* ============================================================
   Registration gate under the buyers teaser  (/members/cp/…/buyers/)
   Добавляется к существующим стилям справочника.
   Ничего из table.css / firm_directory/style.css не переопределяет.
   ============================================================ */

/* --- «скрытые» строки-заглушки: обычные <tr> таблицы, поэтому
       падинги и разделители наследуются от table.grid_account --- */
.catalog__gate-ghost td {
  vertical-align: middle;
}
.catalog__gate-ghost--1 { opacity: .5; }
.catalog__gate-ghost--2 { opacity: .22; }

.catalog__gate-logo {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: #EEF0F2;
}
.catalog__gate-bar {
  display: block;
  height: 11px;
  border-radius: 6px;
  background: #EEF0F2;
}
.catalog__gate-bar--xs { width: 24px; }
.catalog__gate-bar--sm { width: 90px; }
.catalog__gate-bar--md { width: 130px; }
.catalog__gate-bar--lg { width: 100%; max-width: 280px; }

/* --- сам гейт: строка на всю ширину таблицы ---
   #grid_prod_table th, tr, td задают height:60px; display:flex;
   justify-content:flex-start — по весу (id) это било все наши классы, и гейт
   выходил прижатым влево и сплюснутым в 60-пиксельную ячейку. Перебиваем
   тем же id, только для строки гейта. */
#grid_prod_table tr.catalog__gate,
#grid_prod_table tr.catalog__gate > td {
  display: block;
  height: auto;
  width: 100%;
}

/* --- сам гейт: строка на всю ширину таблицы --- */
/* Селектор с .sticky-table нужен по весу: в styles.min.css есть
   .sticky-table td:first-child{background:#fff} (0-2-1), а ячейка гейта в
   строке единственная и попадает под «первую». Без этого тинт не виден. */
.catalog__gate > td,
.sticky-table tr.catalog__gate > td {
  background: #F7FAEC;
  padding: 0;
}
.catalog__gate-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 28px 24px 40px;
  text-align: center;
}
.catalog__gate-text {
  margin: 0;
  max-width: 480px;
  font-size: 15px;
  line-height: 22px;
  color: #202124;
}
.catalog__gate-text b {
  font-weight: 500;
}

/* Кнопка — как «Search» / «Post offer» на главной */
.catalog__gate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: #007347;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .14s ease;
}
/* table.grid_account a:hover{color:inherit} весит больше класса — на ховере
   надпись кнопки темнела. По дизайну меняется только фон. */
.catalog__gate-btn:hover,
.catalog__gate-btn:focus,
table.grid_account a.catalog__gate-btn,
table.grid_account a.catalog__gate-btn:hover,
table.grid_account a.catalog__gate-btn:focus {
  color: #fff;
  text-decoration: none;
}
.catalog__gate-btn:hover,
.catalog__gate-btn:focus {
  background: #186044;
}

.catalog__gate-login {
  font-size: 15px;
  line-height: 1.2;
  color: #216fdb;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.catalog__gate-login:hover,
table.grid_account a.catalog__gate-login:hover {
  color: #216fdb;
  text-decoration: none;
  border-bottom-color: #216fdb;
}

/* Таблица выдачи свёрстана флексами (#grid_prod_table tr{display:flex}), а во
   флекс-раскладке colspan не действует вовсе: ячейка гейта становится обычным
   флекс-элементом и получала 206px вместо всей строки. Тянем её явно. */
.catalog__gate > td,
.sticky-table tr.catalog__gate > td,
#grid_prod_table tr.catalog__gate > td {
  flex: 1 0 100%;
  width: 100%;
}

@media (max-width: 768px) {
  /* Селектор с id обязателен: #grid_prod_table tr{display:flex} (1-0-1)
     перебивал .catalog__gate-ghost{display:none} (0-1-0), и заглушки
     оставались видимыми на телефоне. */
  #grid_prod_table tr.catalog__gate-ghost,
  .catalog__gate-ghost { display: none; }

  /* Гейт — на ширину экрана. Строка шире вьюпорта и прокручивается по
     горизонтали, поэтому ячейку прижимаем к левому краю прокрутки: иначе
     тинт и кнопка уезжают вместе с таблицей. */
  .catalog__gate > td,
  .sticky-table tr.catalog__gate > td,
  #grid_prod_table tr.catalog__gate > td {
    position: sticky;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    flex-basis: 100vw;
  }
  .catalog__gate-box { padding: 24px 16px 32px; gap: 16px; }
}