/* ============================================================
   ДАЛИНИ · формы и таблицы OpenCart в новом оформлении

   Все шаблоны кабинета, оформления заказа и обратной связи размечены
   бутстрапом: .form-horizontal, .form-group, .form-control, .table,
   .well, .btn-primary. Разметку в них не трогаем — часть файлов по
   400 строк и целиком состоит из циклов по кастомным полям, переписывать
   их дороже и рискованнее, чем один раз переопределить внешний вид.

   Область действия — .acct__main и .page__body, то есть содержимое
   перенесённых страниц. Внутрь фильтра, шапки и подвала правила
   не лезут: там своя вёрстка.
   ============================================================ */

/* ---------- сетка кабинета ---------- */
.acct__side{min-width:0}
.acct__main{min-width:0}
.acct__main > * + *{margin-top:22px}

/* Меню кабинета приезжает в колонке, у которой на непереносённых страницах
   свои бутстраповские отступы — внутри .acct они не нужны. */
.acct__side #column-left,
.acct__side #column-right{width:100%;float:none;padding:0;border:0;margin:0}

/* Вариант меню без иконок (модуль gixocaccount задаёт пункты сам). */
.anav--plain a{padding-left:18px}

/* ============ ФОРМЫ ============ */

/* .form-horizontal раскладывает подпись и поле по колонкам сетки бутстрапа.
   В макете подпись всегда сверху, поэтому колонки распускаем. */
.acct__main .form-horizontal .form-group,
.page__body .form-horizontal .form-group{margin:0 0 18px;display:block}
.acct__main .form-horizontal .form-group:after,
.page__body .form-horizontal .form-group:after{content:"";display:table;clear:both}

.acct__main .control-label,
.page__body .control-label{
  display:block;float:none;width:auto;text-align:left;
  font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 7px;padding:0;
}
.acct__main [class*="col-sm-"],
.acct__main [class*="col-md-"],
.page__body [class*="col-sm-"],
.page__body [class*="col-md-"]{width:auto;float:none;padding-left:0;padding-right:0}

/* У .row отрицательные поля под сетку бутстрапа. Колонки выше мы распустили,
   а поля остались — и ряд вылезал за края блока на 15px с каждой стороны. */
.acct__main .row,
.page__body .row{margin-left:0;margin-right:0}

/* Обязательные поля бутстрап помечает классом на .form-group. */
.acct__main .form-group.required .control-label:after,
.page__body .form-group.required .control-label:after{content:" *";color:#C8102E}

/* Звёздочка рисовалась дважды — «* Имя *». Вторую ставит стандартная
   тема правилом div.required .control-label:before, под которое наши
   группы тоже подходят. Чужую гасим, свою оставляем: в макете звёздочка
   стоит после подписи. То же самое уже сделано для оформления заказа. */
.acct__main div.required .control-label::before,
.page__body div.required .control-label::before{content:none}

.acct__main .form-control,
.page__body .form-control{
  width:100%;height:48px;border:1px solid var(--line);border-radius:var(--r-s);
  padding:0 14px;font:inherit;font-size:15px;background:#fff;color:var(--ink);
  outline:0;box-shadow:none;transition:.18s;
}
.acct__main textarea.form-control,
.page__body textarea.form-control{height:auto;min-height:120px;padding:13px 14px;resize:vertical}
.acct__main select.form-control,
.page__body select.form-control{appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767680' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.acct__main .form-control:focus,
.page__body .form-control:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,14,16,.06)}
.acct__main .form-control::placeholder,
.page__body .form-control::placeholder{color:var(--muted)}

/* Флажки и переключатели. Бутстрап кладёт input внутрь label. */
.acct__main .radio,.acct__main .checkbox,
.acct__main .radio-inline,.acct__main .checkbox-inline,
.page__body .radio,.page__body .checkbox,
.page__body .radio-inline,.page__body .checkbox-inline{
  display:inline-flex;align-items:center;gap:9px;
  margin:0 18px 8px 0;padding:0;font-size:14.5px;color:var(--ink-2);cursor:pointer;
}
.acct__main .radio input,.acct__main .checkbox input,
.acct__main .radio-inline input,.acct__main .checkbox-inline input,
.page__body .radio input,.page__body .checkbox input,
.page__body .radio-inline input,.page__body .checkbox-inline input{
  position:static;margin:0;width:17px;height:17px;flex:none;accent-color:var(--amber);
}

/* Группа полей с заголовком. */
.acct__main fieldset,
.page__body fieldset{border:0;padding:0;margin:0 0 26px}
.acct__main legend,
.page__body legend{
  display:block;width:auto;border:0;margin:0 0 16px;padding:0;
  font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--ink);
}

.acct__main .help-block,
.page__body .help-block{font-size:12.5px;color:var(--muted);margin-top:7px}
.acct__main .text-danger,
.page__body .text-danger{font-size:12.5px;color:#C8102E;margin-top:7px}

/* Полоса кнопок под формой. */
.acct__main .buttons,
.page__body .buttons{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.acct__main .buttons .pull-left,
.acct__main .buttons .pull-right,
.page__body .buttons .pull-left,
.page__body .buttons .pull-right{float:none}
.acct__main .buttons .pull-right,
.page__body .buttons .pull-right{margin-left:auto}

/* ============ КНОПКИ ============ */
/* Бутстраповские классы приводим к виду .btn из макета. Селектор с двумя
   классами, чтобы перебить .btn-primary из bootstrap.min.css без !important. */
/* :not([class*="btn--"]) — через HTML-модуль на главную попадает разметка
   из макета, а там кнопки помечены собственными модификаторами .btn--amber,
   .btn--ghost и свёрстаны в theme.css. Этот слой рассчитан на бутстраповские
   .btn-primary и не должен их перебивать. */
.acct__main .btn,
.page__body .btn:not([class*="btn--"]){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 20px;border-radius:var(--r-s);border:1px solid transparent;
  font:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;transition:.18s var(--ease);text-shadow:none;box-shadow:none;
}
.acct__main .btn-primary,
.page__body .btn-primary{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.acct__main .btn-primary:hover,
.page__body .btn-primary:hover{background:var(--amber-d);border-color:var(--amber-d);color:var(--ink)}
.acct__main .btn-default,
.page__body .btn-default{background:#fff;border-color:var(--line);color:var(--ink)}
.acct__main .btn-default:hover,
.page__body .btn-default:hover{border-color:var(--ink);background:#fff;color:var(--ink)}
.acct__main .btn-info,
.page__body .btn-info{background:var(--ink);border-color:var(--ink);color:#fff}
.acct__main .btn-info:hover,
.page__body .btn-info:hover{background:var(--steel);border-color:var(--steel);color:#fff}
.acct__main .btn-danger,
.page__body .btn-danger{background:#fff;border-color:#E3B4BC;color:#C8102E}
.acct__main .btn-danger:hover,
.page__body .btn-danger:hover{background:#FDF3F5;border-color:#C8102E;color:#C8102E}
.acct__main .btn-link,
.page__body .btn-link{height:auto;padding:0;border:0;background:none;color:var(--ink-2);
  border-bottom:1px solid var(--line);border-radius:0;font-weight:500}
.acct__main .btn-link:hover,
.page__body .btn-link:hover{color:var(--ink);border-bottom-color:var(--ink)}
.acct__main .btn-xs,.acct__main .btn-sm,
.page__body .btn-xs,.page__body .btn-sm{height:38px;padding:0 14px;font-size:13.5px}
.acct__main .btn-block,
.page__body .btn-block{width:100%}

/* ============ ТАБЛИЦЫ ============ */
/* Приводим .table к виду .tbl2 из макета. */
.acct__main .table-responsive,
.page__body .table-responsive{overflow-x:auto;border:0;margin:0}
.acct__main .table,
.page__body .table{
  width:100%;border-collapse:collapse;font-size:14.5px;margin:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.acct__main .table > thead > tr > th,
.page__body .table > thead > tr > th{
  text-align:left;padding:12px 18px;border:0;border-bottom:1px solid var(--line-2);
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:600;background:var(--surface);
}
.acct__main .table > tbody > tr > td,
.acct__main .table > tfoot > tr > td,
.page__body .table > tbody > tr > td,
.page__body .table > tfoot > tr > td{
  padding:14px 18px;border:0;border-bottom:1px solid var(--line-2);vertical-align:middle;
}
.acct__main .table > tbody > tr:last-child > td,
.page__body .table > tbody > tr:last-child > td{border-bottom:0}
.acct__main .table-hover > tbody > tr:hover,
.page__body .table-hover > tbody > tr:hover{background:var(--surface)}
.acct__main .table .text-right,
.page__body .table .text-right{text-align:right}
.acct__main .table .text-center,
.page__body .table .text-center{text-align:center}

/* ============ ПРОЧЕЕ ============ */
/* .well — карточка-подложка, у нас это .block. */
.acct__main .well,
.page__body .well{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:none;padding:24px;margin:0;
}
.acct__main .well h2,
.page__body .well h2{font-size:19px;margin-bottom:12px}

.acct__main .list-unstyled,
.page__body .list-unstyled{list-style:none;margin:0;padding:0}
.acct__main .list-unstyled li,
.page__body .list-unstyled li{padding:4px 0}

.acct__main .alert,
.page__body .alert{
  border-radius:var(--r-s);border:1px solid var(--line);background:var(--surface);
  padding:14px 16px;font-size:14.5px;color:var(--ink-2);margin:0 0 18px;
}
.acct__main .alert-success,
.page__body .alert-success{border-color:#B9E3CD;background:#F1FAF5;color:#0E6E42}
.acct__main .alert-danger,
.page__body .alert-danger{border-color:#E3B4BC;background:#FDF3F5;color:#C8102E}

/* Заголовки внутри содержимого: h1 печатает каркас, эти — подзаголовки.

   У .page__body берём только прямых потомков. Через этот же контейнер
   проходит разметка из макета, вставленная HTML-модулем, и там заголовки
   вложены в свои обёртки — .sechead, .hslide__b, .custom__l. Им нужен
   размер из theme.css, а не наш мелкий: иначе крупный заголовок секции
   съёживался до подзаголовка. В кабинете наоборот — там h2 сидят внутри
   панелей и .well, поэтому селектор остаётся по потомкам. */
.acct__main h2,
.page__body > h2{font-size:20px;letter-spacing:-.02em;margin:0 0 14px}
.acct__main h3,
.page__body > h3{font-size:17px;letter-spacing:-.015em;margin:0 0 12px}

@media(max-width:900px){
  .acct{grid-template-columns:1fr}
  .anav{position:static}
}

/* ---------- обзор кабинета ----------
   Штатная страница account/account — это только ссылки, разбитые по темам.
   Раскладываем их плитками .acard в две колонки. */
.acards--2{grid-template-columns:repeat(2,1fr);margin-bottom:0}
@media(max-width:760px){.acards--2{grid-template-columns:1fr}}
.acard .list-unstyled{margin-top:4px}
.acard .list-unstyled li{padding:6px 0;border-bottom:1px solid var(--line-2)}
.acard .list-unstyled li:last-child{border-bottom:0}
.acard .list-unstyled a{font-size:14.5px;color:var(--ink-2);transition:.18s}
.acard .list-unstyled a:hover{color:var(--amber-d)}

/* Две карточки рядом на странице входа. */
.acct__main .fgrid2 > .well{margin:0}

/* ============ РЕГИСТРАЦИЯ: ОРГАНИЗАЦИЯ ============ */
/* Галочка «Зарегистрировать компанию» на account/register. Внешний вид —
   как у #company-toggle в оформлении заказа: подпись крупнее мелкого
   текста согласий, поля организации в рамке под ней. */
.acct__main .dalini-company-toggle{
  display:inline-flex;align-items:flex-start;gap:10px;margin:0;
  font-size:14.5px;color:var(--ink-2);line-height:1.45;cursor:pointer;
}
.acct__main .dalini-company-toggle input{width:18px;height:18px;margin:1px 0 0}
.acct__main .dalini-company{
  margin-top:16px;padding:20px 20px 2px;
  border:1px solid var(--line);border-radius:var(--r-s);background:#fff;
}
.acct__main .dalini-company[hidden]{display:none}