/* appb24.ru — page-level bits on top of airkit-for-b24. All components live in the kit (.b24-site layout,
   b24-site-header, b24-hero, b24-product-card, b24-prose, b24-document, b24-linklist, b24-site-layout,
   b24-site-footer, b24-page-bar, b24-app-intro, b24-doc-index, b24-cta, b24-contacts, b24-anchor-nav). */

/* cards targeted by the anchor nav stop below the sticky header and the anchor bar */
.site-anchor { scroll-margin-top: calc(var(--b24-site-header-h, 64px) + 56px); }
.site-intro { margin: 0 0 var(--b24-space-md); }
/* app icons (raster/svg files) inside the mega menu icon box */
.site-menu-icon img { display: block; width: 24px; height: 24px; border-radius: 6px; }
.b24-empty .b24-btn { margin-top: var(--b24-space-xs); }

/* Official brand marks in the apps menu (see src/assets/brands/README.md): the kit's icon slot is tinted blue
   for line icons; a raster/colour mark keeps its own colours and loses the tinted box in the pane head. */
.site-mark-slot { background: transparent; }

/* /vnedrenie/: "Не входит" под составом пакета, цены допов, подписи под сопровождением */
.site-plan-excl { padding-top: var(--b24-space-sm); border-top: 1px solid var(--b24-divider); }
.site-plan-excl__title { margin: 0 0 8px; font-size: var(--b24-font-size-xs); font-weight: var(--b24-font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--b24-text-subtle); }
.site-plan-excl .b24-plan__features { flex: 0 0 auto; }
.site-plan-excl .b24-plan__features li.is-off { color: var(--b24-text-secondary); }
.site-plan-excl__price { display: block; font-size: var(--b24-font-size-sm); color: var(--b24-text-subtle); }
.site-discount { margin-top: var(--b24-space-xl); }
/* партнёрство с 1С-Битрикс: один лок-ап (логотип | статус) без плашек — в hero «Внедрения», карточке на главной
   и подвале; на тёмном фоне логотип белым через filter, рядом слово «Битрикс24» в тексте не повторяется */
.site-lockup { display: inline-flex; align-items: center; gap: 12px; line-height: 1; }
.site-lockup__logo { display: block; width: auto; height: 18px; }
.site-lockup__status { padding-left: 12px; border-left: 1px solid var(--b24-divider); font-size: var(--b24-font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--b24-text-subtle); }
.site-lockup--light .site-lockup__logo { filter: brightness(0) invert(1); opacity: 0.92; }
.site-lockup--light .site-lockup__status { color: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.28); }
.site-lockup--hero { margin: 0 0 18px; }
.site-footer-partner { display: flex; flex-direction: column; gap: 10px; }
.site-footer-partner small { font-size: var(--b24-font-size-xs); color: rgba(255, 255, 255, 0.55); }
/* главная, раздел «Партнёрство»: карточка с текстом и кнопками, справа сертификат */
.site-partner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--b24-space-lg); align-items: start; }
.site-partner__card { display: flex; flex-direction: column; gap: var(--b24-space-md); padding: var(--b24-space-xl); }
.site-partner__meta { margin: -6px 0 0; font-size: var(--b24-font-size-sm); color: var(--b24-text-subtle); }
.site-partner__text { margin: 0; line-height: 1.55; }
.site-partner__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: var(--b24-font-size-sm); }
.site-partner__list li { position: relative; padding-left: 22px; }
.site-partner__list li::before { content: ''; position: absolute; left: 0; top: 0.35em; width: 12px; height: 12px; border-radius: 50%; background: var(--b24-color-success, #2fc26e); }
.site-partner__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.site-partner__cert { display: block; padding: var(--b24-space-md); background: var(--b24-bg-subtle, #f5f8fb); text-decoration: none; }
.site-partner__cert img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 6px 24px rgba(7, 52, 133, 0.15); }
.site-partner__cert-note { grid-column: 2; margin: calc(-1 * var(--b24-space-sm)) 0 0; font-size: var(--b24-font-size-xs); color: var(--b24-text-subtle); text-align: center; }
/* /vnedrenie/: лицензия через партнёра под пакетами */
.site-license { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--b24-space-lg); align-items: center; margin-top: var(--b24-space-xl); padding: var(--b24-space-lg) var(--b24-space-xl); }
.site-license__title { margin: 0 0 4px; font-size: var(--b24-font-size-lg, 17px); font-weight: var(--b24-font-weight-semibold); }
.site-license__text { margin: 0; font-size: var(--b24-font-size-sm); line-height: 1.5; color: var(--b24-text-secondary); }
.site-license__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) {
  .site-partner, .site-license { grid-template-columns: minmax(0, 1fr); }
  .site-partner__cert-note { grid-column: auto; }
  .site-partner__card { padding: var(--b24-space-lg); }
}
.site-notes { margin: var(--b24-space-lg) 0 0; padding-left: 20px; color: var(--b24-text-secondary); line-height: 1.6; }
.site-extras .b24-compare { min-width: 0; }
.site-extras .b24-compare td:first-child { font-weight: var(--b24-font-weight-medium); }
.site-price-cell { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* цены пакетов: четыре карточки в ряд, «от 350 000 ₽» должно уместиться в одну строку */
#packages .b24-plan__amount { white-space: nowrap; font-size: clamp(26px, 2.5vw, 34px); }
/* телефон в шапке: иконка + номер, цифры табличные */
.site-phone { font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-phone svg { width: 16px; height: 16px; }
/* форма заявки: ловушка для ботов и сообщения */
.site-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.site-form-alert { margin-bottom: var(--b24-space-lg); }
/* шаг «письмо отправлено»: поле кода из письма и кнопка в одну строку */
.site-code-row { display: flex; gap: var(--b24-space-sm); align-items: center; }
.site-code-input { max-width: 11em; font-size: 1.25rem; letter-spacing: 0.2em; text-align: center; font-variant-numeric: tabular-nums; }
/* кабинет поддержки */
.site-support-table { width: 100%; min-width: 0; }
.site-support-table td:first-child a { font-weight: var(--b24-font-weight-medium); }
.site-support-table .site-support-date { white-space: nowrap; color: var(--b24-text-secondary); }
.site-support-meta { display: flex; flex-wrap: wrap; gap: var(--b24-space-sm) var(--b24-space-lg); color: var(--b24-text-secondary); font-size: var(--b24-font-size-sm); margin: 0 0 var(--b24-space-md); }
.site-support-text { overflow-wrap: anywhere; }
.site-support-comment { padding: var(--b24-space-sm) 0; border-top: 1px solid var(--b24-divider); }
.site-support-comment__meta { color: var(--b24-text-subtle); font-size: var(--b24-font-size-xs); margin: 0 0 4px; }
.site-support-table .b24-counter { margin-left: 4px; }
/* блок разработчика «D» стоит в строке шапки после .b24-site-header__actions: на телефоне actions кит прячет
   до открытия меню, а кнопка остаётся видимой справа, перед бургером */
.b24-site-header__row > [data-b24-vendor] { margin-left: var(--b24-space-xs); }
@media (max-width: 960px) {
  .b24-site-header.is-enhanced .b24-site-header__row > [data-b24-vendor] { margin-left: auto; }
  .b24-site-header.is-enhanced .b24-site-header__burger { margin-left: var(--b24-space-xs); }
}
/* вложения: выбор файлов в формах и список файлов в сообщениях */
.site-attach { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.site-attach__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.site-attach__input:focus-visible + .site-attach__btn { outline: 2px solid var(--b24-color-primary); outline-offset: 2px; }
.site-attach__btn { cursor: pointer; }
.site-attach__btn .b24-icon, .site-attach__btn svg { width: 18px; height: 18px; }
.site-attach__hint { color: var(--b24-text-subtle); font-size: var(--b24-font-size-xs); }
.site-attach__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; flex: 1 0 100%; }
.site-attach__list--composer { margin: 0; padding: 0 12px 8px; }
.site-attach__item { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--b24-bg-subtle, #f3f5f8); font-size: var(--b24-font-size-sm); }
.site-attach__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.site-attach__size { color: var(--b24-text-subtle); font-size: var(--b24-font-size-xs); }
.site-attach__remove { border: 0; background: none; color: var(--b24-text-subtle); font-size: 16px; line-height: 1; padding: 0 4px; cursor: pointer; }
.site-attach__remove:hover { color: var(--b24-color-danger, #d9534f); }
.site-files { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.site-chat__text + .site-files { margin-top: 8px; }
.site-file__preview { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--b24-divider); background: #fff; }
.site-file__preview img { display: block; max-width: 220px; max-height: 160px; object-fit: cover; }
.site-file__link { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 12px 6px 8px; border-radius: 10px; border: 1px solid var(--b24-divider); background: #fff; color: var(--b24-text-primary); text-decoration: none; font-size: var(--b24-font-size-sm); }
.site-file__link:hover { border-color: var(--b24-color-primary-light, #6ea0ff); }
.site-file__link svg { width: 18px; height: 18px; flex: none; color: var(--b24-text-subtle); }
.site-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.site-file__size { color: var(--b24-text-subtle); font-size: var(--b24-font-size-xs); white-space: nowrap; }
.b24-field__error { color: var(--b24-color-danger, #d9534f); font-size: var(--b24-font-size-xs); margin: 4px 0 0; }
/* перетаскивание файлов в форму обращения или композер */
.site-support-form, .site-composer { position: relative; }
.site-support-form.is-dragover::after, .site-composer.is-dragover::after { content: 'Отпустите, чтобы прикрепить файлы'; position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--b24-color-primary); border-radius: 12px; background: rgba(232, 241, 255, 0.92); color: var(--b24-color-primary); font-weight: var(--b24-font-weight-semibold); pointer-events: none; }
/* предложение включить уведомления браузера */
.site-notify-ask { margin-bottom: var(--b24-space-lg); }
.site-notify-ask .b24-alert__content { display: flex; flex-wrap: wrap; gap: var(--b24-space-sm) var(--b24-space-md); align-items: center; }
.site-notify-ask__actions { display: inline-flex; gap: 8px; margin-left: auto; }
/* карточка обращения: слева тело, справа переписка (как чат задачи в Битрикс24) */
.site-ticket { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b24-space-lg); align-items: start; }
@media (min-width: 1024px) {
  .site-ticket { grid-template-columns: minmax(0, 1fr) minmax(380px, 44%); }
  .site-ticket__chat { position: sticky; top: calc(var(--b24-site-header-h, 64px) + var(--b24-space-md)); max-height: calc(100vh - var(--b24-site-header-h, 64px) - var(--b24-space-md) * 2); }
}
.site-ticket__chat { display: flex; flex-direction: column; min-height: 420px; }
.site-ticket__chat .b24-card__header { flex: 0 0 auto; }
.site-chat { flex: 1 1 auto; min-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--b24-space-sm); padding: var(--b24-space-md) var(--b24-space-lg); scroll-behavior: smooth; }
.site-chat__empty { margin: auto 0; text-align: center; }
.site-chat__msg { display: flex; }
.site-chat__msg--client { justify-content: flex-end; }
.site-chat__bubble { max-width: 82%; padding: 10px 14px; border-radius: 14px; background: var(--b24-bg-subtle, #f3f5f8); }
.site-chat__msg--client .site-chat__bubble { background: var(--b24-primary-soft, #e8f1ff); border-bottom-right-radius: 4px; }
.site-chat__msg--operator .site-chat__bubble { border-bottom-left-radius: 4px; }
.site-chat__who { margin: 0 0 2px; font-size: var(--b24-font-size-xs); font-weight: var(--b24-font-weight-semibold); color: var(--b24-text-secondary); }
.site-chat__text { overflow-wrap: anywhere; }
.site-chat__text p { margin: 0 0 6px; }
.site-chat__time { margin: 4px 0 0; font-size: var(--b24-font-size-xs); color: var(--b24-text-subtle); text-align: right; }
.site-composer { flex: 0 0 auto; padding: var(--b24-space-md) var(--b24-space-lg) var(--b24-space-lg); border-top: 1px solid var(--b24-divider); }
.site-composer .site-form-alert { margin-bottom: var(--b24-space-sm); }
.site-composer .b24-composer { box-shadow: none; border: 1px solid var(--b24-divider); }
/* без JS кит не раскрывает подвал композера — кнопка «Отправить» нужна всегда */
.no-js .site-composer .b24-composer__footer { display: flex; }
.site-draft-note .b24-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.b24-modal .site-support-form .b24-site-form__text { margin-top: 0; }
.site-ticket-head__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
/* на телефоне длинная тема обращения переносится, а не обрезается многоточием (у кита заголовок в одну строку) */
@media (max-width: 768px) { .site-ticket-head__title.b24-page-header__title { white-space: normal; line-height: 1.25; } }
.site-ticket__props { margin-top: var(--b24-space-lg); padding-top: var(--b24-space-md); border-top: 1px solid var(--b24-divider); }
.site-chat__bubble { max-width: 84%; }
.site-chat__msg--operator .site-chat__who { color: var(--b24-primary, #0b66c3); }
.site-unread { font-weight: var(--b24-font-weight-semibold); }
/* фильтр списка обращений: поиск, статус, приложение в одну строку (на телефоне — в столбик) */
.site-filter { display: flex; flex-wrap: wrap; gap: var(--b24-space-sm); align-items: center; margin-bottom: var(--b24-space-md); }
.site-filter__q { flex: 1 1 220px; min-width: 0; }
.site-filter .b24-select, .site-filter .b24-input { min-height: 40px; }
.site-filter__select { flex: 0 1 200px; }
.site-filter__count { color: var(--b24-text-secondary); font-size: var(--b24-font-size-sm); margin-left: auto; }
/* оценка решения: звёзды-радиокнопки */
.site-rate { margin-top: var(--b24-space-md); }
.site-rate__stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.site-rate__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.site-rate__stars label { cursor: pointer; font-size: 30px; line-height: 1; color: var(--b24-divider); transition: color .12s; }
.site-rate__stars label:hover, .site-rate__stars label:hover ~ label, .site-rate__stars input:checked ~ label { color: #f5a623; }
.site-rate__stars input:focus-visible + label { outline: 2px solid var(--b24-color-primary); outline-offset: 2px; border-radius: 4px; }
.site-rate__row { display: flex; flex-wrap: wrap; gap: var(--b24-space-sm) var(--b24-space-md); align-items: center; }
.site-rate__done { color: #f5a623; font-size: 22px; letter-spacing: 2px; }
.site-rate__comment { margin-top: var(--b24-space-sm); }
.site-chat__msg--system .site-chat__bubble { background: transparent; border: 1px dashed var(--b24-divider); }

/* Hero внедрения: вырезанный макет устройств из кампании Битрикс24 (PNG с прозрачностью) — без рамки и прямоугольной тени кита */
.site-hero-media { justify-self: end; max-width: 620px; }
.site-hero-media img { border-radius: 0; box-shadow: none; filter: drop-shadow(0 28px 36px rgba(6, 20, 50, 0.45)); }
@media (max-width: 760px) {
  .site-hero-media { display: none; }
}

/* Оценка по ссылке из письма (/support/rate/…): крупные звёзды и строка статуса */
.site-rate-link__ticket { margin: 0; }
.site-rate-link__question { margin: 0 0 var(--b24-space-xs); font-size: var(--b24-font-size-xl); font-weight: var(--b24-font-weight-semibold); }
.site-rate-link__stars label { font-size: 44px; padding: 0 2px; }
.site-rate-link__status { min-height: 1.5em; margin: var(--b24-space-xs) 0 0; color: var(--b24-color-success-active); font-weight: var(--b24-font-weight-semibold); }
.site-rate-link__status.is-error { color: var(--b24-color-danger, #df532d); }
.site-rate-link textarea.b24-input { min-height: 96px; }

/* Hero главной: вкладки приложений (компонент appb24.hero.apps) */
.site-hero-apps { min-width: 0; }
.site-hero-apps__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.site-hero-apps__tab { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.1); color: #fff; font: inherit; font-size: var(--b24-font-size-md); font-weight: var(--b24-font-weight-medium, 500); line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.site-hero-apps__tab img { width: 26px; height: 26px; border-radius: 7px; background: #fff; }
.site-hero-apps__tab:hover { background: rgba(255, 255, 255, 0.18); }
.site-hero-apps__tab.is-active { background: #fff; border-color: #fff; color: #0b2f73; }
.site-hero-apps__tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.site-hero-apps__window { display: block; border-radius: 14px; overflow: hidden; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 30px 60px rgba(3, 18, 60, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12); }
.site-hero-apps__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #eef1f5; border-bottom: 1px solid #e1e5ea; }
.site-hero-apps__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d3d8de; }
.site-hero-apps__bar span { margin-left: 10px; max-width: 280px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 10px; border-radius: 8px; background: #fff; color: #8a929c; font-size: 11px; line-height: 16px; }
.site-hero-apps__shot { display: block; aspect-ratio: 5 / 3; }
.site-hero-apps__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.site-hero-apps__shot--narrow { display: flex; justify-content: center; padding: 22px 0; background: linear-gradient(160deg, #eef4fb, #dfe9f7); box-sizing: border-box; }
.site-hero-apps__shot--narrow img { width: auto; height: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(3, 18, 60, 0.18); }
.site-hero-apps__card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; aspect-ratio: 5 / 3; padding: 32px 44px; box-sizing: border-box; background: linear-gradient(160deg, #f7f9fc, #eaf1fb); color: var(--b24-text-secondary); }
.site-hero-apps__card img { width: 72px; height: 72px; border-radius: 18px; }
.site-hero-apps__card strong { font-size: var(--b24-font-size-3xl, 24px); line-height: 1.25; color: var(--b24-text-primary); }
.site-hero-apps__caption { margin: 12px 2px 0; color: rgba(255, 255, 255, 0.8); font-size: var(--b24-font-size-md); line-height: 1.45; }
.site-hero-apps__caption a { color: #fff; }
.site-hero-apps__dots { display: flex; gap: 6px; margin-top: 10px; }
.site-hero-apps__dots i { width: 24px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); transition: background .2s; }
.site-hero-apps__dots i.is-active { background: #fff; }
@media (max-width: 760px) {
  .site-hero-apps { margin-top: var(--b24-space-md); }
  .site-hero-apps__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--b24-space-md, 16px)); padding-right: var(--b24-space-md, 16px); }
  .site-hero-apps__tabs::-webkit-scrollbar { display: none; }
  .site-hero-apps__tab { flex: 0 0 auto; }
  .site-hero-apps__card { padding: 20px 24px; }
}