/**
 * DirectTalk — UI Kit. Единые компоненты интерфейса, собранные из токенов
 * (tokens.css). Классы с префиксом .dt-* сосуществуют со старыми стилями —
 * разделы переводятся на них постепенно, ничего не ломая одномоментно.
 */

/* ---------- Контейнер ---------- */
.dt-container {
    max-width: var(--dt-container);
    margin: 0 auto;
    padding-left: var(--dt-gutter);
    padding-right: var(--dt-gutter);
}

/* ---------- Кнопки ---------- */
.dt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--dt-font);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    height: var(--dt-control-h);
    padding: 0 22px;
    border-radius: var(--dt-r);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s, border-color .15s;
}
.dt-btn--primary { background: var(--dt-accent); color: #fff; }
.dt-btn--primary:hover,
.dt-btn--primary:focus { background: var(--dt-accent-600); color: #fff; }

.dt-btn--outline { background: transparent; color: var(--dt-ink); border-color: var(--dt-border); }
.dt-btn--outline:hover,
.dt-btn--outline:focus { border-color: var(--dt-accent); color: var(--dt-accent); }

.dt-btn--ghost { background: var(--dt-soft); color: var(--dt-ink); }
.dt-btn--ghost:hover,
.dt-btn--ghost:focus { background: var(--dt-soft-2); color: var(--dt-ink); }

.dt-btn--sm { height: 36px; padding: 0 16px; font-size: 14px; border-radius: var(--dt-r-sm); }
.dt-btn--lg { height: 52px; padding: 0 28px; font-size: 16px; border-radius: var(--dt-r-lg); }
.dt-btn--block { display: flex; width: 100%; }

.dt-btn:disabled,
.dt-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.dt-btn:focus-visible { outline: 2px solid var(--dt-accent); outline-offset: 2px; }

/* ---------- Поля форм ---------- */
.dt-field { display: flex; flex-direction: column; gap: 7px; }
.dt-field__label { font-size: 13px; font-weight: 600; color: var(--dt-ink-2); }
.dt-input,
.dt-select {
    height: var(--dt-control-h);
    padding: 0 14px;
    border: 1.5px solid var(--dt-border);
    border-radius: var(--dt-r);
    background: var(--dt-surface);
    color: var(--dt-ink);
    font-family: var(--dt-font);
    font-size: 15px;
    transition: border-color .15s;
}
.dt-input::placeholder { color: var(--dt-muted); }
.dt-input:focus,
.dt-select:focus { outline: none; border-color: var(--dt-accent); }

/* ---------- Карточка ---------- */
.dt-card {
    background: var(--dt-surface);
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-r-lg);
    box-shadow: var(--dt-shadow-sm);
    overflow: hidden;
}
.dt-card__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.dt-card__title { font-weight: 700; font-size: 16px; color: var(--dt-ink); }
.dt-card__meta { font-size: 13px; color: var(--dt-muted); }
.dt-card__price { font-size: 20px; font-weight: 800; color: var(--dt-accent); }

/* ---------- Типографика (по желанию, для новых страниц) ---------- */
.dt-title { font-size: 30px; font-weight: 800; letter-spacing: -.01em; color: var(--dt-ink); margin: 0 0 16px; }
.dt-h2    { font-size: 22px; font-weight: 800; color: var(--dt-ink); margin: 0 0 12px; }
.dt-h3    { font-size: 18px; font-weight: 700; color: var(--dt-ink); margin: 0 0 10px; }
.dt-muted { color: var(--dt-muted); }

/* ---------- Пустое состояние раздела ---------- */
.dt-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 20px; text-align: center; }
.dt-empty__title { font-size: 18px; font-weight: 700; color: var(--dt-ink); }
.dt-empty__text { max-width: 460px; font-size: 14px; line-height: 1.5; color: var(--dt-ink-2); }

/* ---------- Текст только для экранных дикторов ---------- */
.dt-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Ошибка в поле формы ---------- */
.input-field.has-error,
.bx-authform-input-container input.has-error { border-color: var(--dt-danger) !important; }
.dt-field-error { margin-top: 4px; font-size: 13px; color: var(--dt-danger); }
.dt-field-error--block { margin: -6px 0 14px; }