/* Start:/local/components/zabotix/partner.registration.form/templates/unauth/style.css?1779987161880*/
/* ============================================================
   partner.registration.form — unauth (guest) template overrides
   Подключается из unauth/template.php через addExternalCSS('./style.css')
   ДОПОЛНИТЕЛЬНО к shared templates/style.css.
   Содержит только различия от shared, специфичные для guest-варианта.
   ============================================================ */

/* Row-layout без переноса — guest-форма короче, без scroll по высоте;
   контент рендерится в split-layout с боковой картинкой. */
.registration-form-content {
  min-height: 0;
  overflow-y: auto;
  display: flex !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
  align-items: stretch !important;
}

/* End */


/* Start:/local/components/zabotix/partner.registration.form/templates/style.css?178784172845572*/
/* ============================================================
   partner.registration.form — shared styles
   Подключается из templates/.default/template.php и templates/unauth/template.php
   через addExternalCSS('../style.css').

   Использует CSS-переменные с fallback'ами для работы как stand-alone
   (var(--pz-color-accent, #d45b40)) — компонент должен корректно
   рендериться на чужих порталах без дизайн-системы site_zabotix.

   Шрифты: variable fonts (Open Sans + Montserrat) подключены через
   @font-face из templates/fonts/ — компонент работает self-contained
   без зависимости от шрифтов родительского шаблона.
   ============================================================ */

/* === ФИРМЕННЫЕ ШРИФТЫ КОМПОНЕНТА === */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src:
    url("/local/components/zabotix/partner.registration.form/templates/fonts/OpenSans[wdth,wght].ttf") format("truetype-variations"),
    url("/local/components/zabotix/partner.registration.form/templates/fonts/OpenSans[wdth,wght].ttf") format("truetype");
  font-stretch: 75% 125%;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src:
    url("/local/components/zabotix/partner.registration.form/templates/fonts/Montserrat[wght].ttf") format("truetype-variations"),
    url("/local/components/zabotix/partner.registration.form/templates/fonts/Montserrat[wght].ttf") format("truetype");
}

.pa-registration-form {
  --pa-reg-border: var(--pz-color-border, #d3d6e2);
  --pa-reg-accent: var(--pz-color-accent, #d45b40);
  --pa-reg-error: var(--pz-color-danger, #e74c3c);
  --pa-reg-text: var(--pz-color-text, #1a2a4a);
  --pa-reg-header: var(--pz-color-header, #0f1a2f);

  /* Локальное переопределение токенов из старого modules/assets/css/tokens.css —
     раньше эти переменные приходили глобально через layout, сейчас компонент
     self-contained. Все var(--color-*) в правилах ниже разрешаются здесь. */
  --color-orange: var(--pz-color-accent, #d45b40);
  --color-orange-dark: #b74d35;
  --color-primary: #222b4b;
  --color-secondary: #333333;
  --color-accent: #525c81;
  --color-additional: #6471b2;
  --color-gray: #9e9e9e;
  --color-gray-2: #757485;
  --color-gray-light: #e2e5ec;
  --color-gray-light-2: #eeeeee;
  --color-error: #ff2e2e;
  --color-white: #ededf2;
  --color-light-dark: rgba(0, 0, 0, 0.1);
  --color-accent-blue: #5b74ff;
  --color-text-primary-dark: #3c4368;
  --color-border-button-outline: rgba(34, 43, 75, 0.7);

  --font-family-base: "Open Sans", sans-serif;
  --font-size-2xs: 0.625rem;
  --font-size-xs: 0.8125rem;
  --font-size-s: 0.875rem;
  --font-size-m: 1rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.5rem;
  --font-size-2xl: 2.5rem;
  --font-size-xxl: 3.125rem;
  --line-height-base: 1.5;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-m: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.375rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 2.5rem;
  --spacing-xxl: 3.125rem;

  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 1rem;
  --border-radius-round: 50px;

  --transition-base: 0.3s ease;
  --transition-fast: 0.15s ease;
  --transition-slow: 0.5s ease;

  font-family: "Open Sans", system-ui, sans-serif;
}

/* === ТИПОГРАФИЧЕСКИЕ УТИЛИТЫ КОМПОНЕНТА === */
/* Раньше эти правила приходили из modules/partner.affiliate/assets/css/
   typography.css, который подключался через layout. После рефактора
   компонент self-contained — typography утилиты переехали сюда,
   заскоупленные под .pa-registration-form чтобы не утечь глобально. */

.pa-registration-form .text-lg {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.16;
}

.pa-registration-form .text-m {
  font-size: 1rem;
  font-weight: 400;
}

.pa-registration-form .text-s {
  font-size: 0.875rem;
  font-weight: 400;
}

.pa-registration-form .text-white {
  color: #ededf2;
}

/* Заголовок секции "Анкета партнёра Айтис" в auth-форме также
   использует .text-lg, но рендерится вне .pa-registration-form scope
   (в form-header). Резервный селектор покрывает этот случай. */
/* Узел заголовка анкеты теперь семантический <h1> (доступность, задача T1),
   а не <span>: сбрасываем margin браузерного UA-стиля h1, которого раньше
   не было — отступы уже заданы через .form-header (margin-bottom). */
.form-header .text-lg {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.16;
  margin: 0;
}

/* ============================================================
   1. LAYOUT — .registration-container / .registration-form / .registration-image
   ============================================================ */

.registration-container {
  display: flex;
  height: 100%;
}

.registration-form {
  flex: 1;
  background-color: white;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-2xl);
  padding-bottom: var(--spacing-m);
  min-width: 0;
}

.registration-form .registration-form-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex: 1;
  align-items: center;
}

.registration-image {
  flex: 1;
  background-color: var(--color-primary);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  padding: var(--spacing-xxl);
  min-width: 0;
}

.registration-image-content {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}

.registration-dots {
  background-image: url(/local/components/zabotix/partner.registration.form/templates/../images/Dots.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 4rem;
  height: 0.375rem;
}

.registration-image-text {
  max-width: 29.625rem;
  margin-bottom: 2.125rem;
}

/* ============================================================
   2. FORM ELEMENTS (generic)
   ============================================================ */

.pa-registration-form .form-group label {
  font-weight: var(--font-weight-regular);
  font-size: 13px;
}

.pa-registration-form .form-header {
  margin-bottom: 1.375rem;
}

.pa-registration-form .form-content {
  max-width: 36.5rem !important;
  margin: 0 auto;
  width: 100%;
}

.pa-registration-form .form-group {
  margin-bottom: var(--spacing-lg);
  text-align: left;
}

.pa-registration-form .form-footer {
  margin-top: var(--spacing-lg);
  text-align: center;
  font-size: var(--font-size-xs);
}

.pa-registration-form .form-group input[type="text"],
.pa-registration-form .form-group input[type="email"],
.pa-registration-form .form-group input[type="password"],
.pa-registration-form .form-group input[type="number"],
.pa-registration-form .form-group input[type="url"],
.pa-registration-form .form-group input[type="tel"] {
  width: 100%;
}

.pa-registration-form .checkbox-group {
  display: flex;
  gap: var(--spacing-sm);
}

.pa-registration-form .validation-error {
  color: var(--color-error);
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.25rem;
  letter-spacing: -0.11px;
}

/* ============================================================
   3. INPUT (generic) — scoped под .pa-registration-form
   ============================================================ */

/* Стандартный ::placeholder покрывает все современные браузеры;
   vendor-prefixed варианты удалены — они противоречили базовому
   правилу (font-size 16px vs 13px) и не применялись на современных
   движках, где стандартный селектор имеет приоритет. */
.pa-registration-form input::placeholder {
  color: #999;
  font-family: "Open Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: -0.01px !important;
  text-align: left !important;
}

.pa-registration-form input::-webkit-outer-spin-button,
.pa-registration-form input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pa-registration-form input[type="number"],
.pa-registration-form input[name="order_number"] {
  -moz-appearance: textfield;
  text-align: center;
  width: 50%;
}

.pa-registration-form input:focus-visible {
  outline-color: var(--color-orange);
}

/* Dropdown helpers */
.dropdown-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  text-align: center;
}

.dropdown-label {
  font-family: var(--font-family-base, "Open Sans", sans-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
  color: var(--color-secondary);
}

.dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.dropdown-select.dropdown-select-full-width {
  width: 100%;
}

.dropdown-select:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--color-orange);
}

.dropdown-arrow {
  position: absolute;
  top: 50%;
  right: var(--spacing-m);
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-gray-2);
  font-size: var(--font-size-xs);
}

/* ============================================================
   4. BUTTONS
   ============================================================ */

.button {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  color: white;
  white-space: nowrap;
  text-align: center;
  height: 37px;
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--transition-base);
  line-height: 1;
}

.button-auto {
  width: auto;
}

.button-secondary {
  background: none;
  color: var(--color-secondary);
  border: 2px solid var(--color-border-button-outline);
  --color-accent: var(--color-light-dark);
  font-weight: var(--font-weight-medium);
  line-height: initial;
}

.button-orange {
  background-color: var(--color-orange);
  --color-accent: var(--color-orange-dark);
}

.button-clear {
  border: none;
  background: none;
}

.button:hover {
  background-color: var(--color-accent);
}

.button:disabled {
  filter: brightness(0.5);
  pointer-events: none;
}

.button-icon {
  cursor: pointer;
  border: none;
  background: none;
  width: 1.5rem;
  height: 1.5rem;
}

.button-icon:hover {
  background-color: var(--color-light-dark, rgba(34, 43, 75, 0.1));
}

/* ============================================================
   5. CHECKBOX — scoped под .pa-registration-form
   ============================================================ */

.pa-registration-form input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.pa-registration-form .checkbox-custom {
  position: relative;
  appearance: none;
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-gray-light);
  border-radius: 4px;
  background-color: var(--color-white);
  cursor: pointer;
  flex-shrink: 0;
}

.pa-registration-form input[type="checkbox"]:checked + .checkbox-custom {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
}

.pa-registration-form input[type="checkbox"]:checked + .checkbox-custom::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
    center center no-repeat;
}

.form-checkbox {
  position: relative;
  display: block;
  margin-bottom: 20px;
}

.form-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.form-checkbox label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  padding-left: 30px;
}

.form-checkbox label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border: 2px solid #ccc;
  border-radius: 3px;
  background-color: white;
  transition: all 0.2s ease;
}

.form-checkbox input[type="checkbox"]:checked + label::before {
  background-color: var(--pa-reg-accent);
  border-color: var(--pa-reg-accent);
}

.form-checkbox input[type="checkbox"]:checked + label::after {
  content: "✓";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-weight: bold;
  font-size: 12px;
  line-height: 1;
}

.checkbox-text {
  font-size: var(--font-size-s, 14px);
  color: var(--color-text, #333);
}

.form-checkbox input[type="checkbox"]:focus {
  outline: none !important;
}

/* ============================================================
   6. PAYER-TYPE — выбор типа плательщика (radio cards)
   ============================================================ */

.payer-type-selection {
  margin-bottom: 24px;
}

.payer-type-selection label:first-child {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #29373d;
  margin-bottom: 12px;
}

.pa-registration-form__payer-type-option {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 12px;
}

.pa-registration-form__payer-type-option:hover:not(.disabled) {
  border-color: var(--pa-reg-accent);
  background-color: #fef8f7;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 91, 64, 0.1);
}

.pa-registration-form__payer-type-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pa-registration-form__payer-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pa-registration-form__payer-type-option .payer-radio-circle {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid #9ca3af;
  border-radius: 50%;
  margin-right: 16px;
  flex-shrink: 0;
  transition: all 0.2s ease;
  background-color: #fff;
}

.pa-registration-form__payer-type-option:hover:not(.disabled)
  .payer-radio-circle {
  border-color: var(--pa-reg-accent);
}

.pa-registration-form__payer-type-option--selected .payer-radio-circle {
  border-color: var(--pa-reg-accent);
  background-color: var(--pa-reg-accent);
}

.pa-registration-form__payer-type-option .payer-radio-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
  transition: transform 0.2s ease;
}

.pa-registration-form__payer-type-option--selected .payer-radio-circle::after {
  transform: translate(-50%, -50%) scale(1);
}

.pa-registration-form__payer-type-option span {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  transition: color 0.2s ease;
}

.pa-registration-form__payer-type-option--selected span {
  color: var(--pa-reg-accent);
}

.pa-registration-form__payer-type-option.disabled span {
  color: #9ca3af;
}

.pa-registration-form__payer-type-option--selected {
  border-color: var(--pa-reg-accent);
  background-color: #fef8f7;
  box-shadow: 0 0 0 3px rgba(212, 91, 64, 0.1);
}

/* ============================================================
   7. FORM CORE — .pa-registration-form контейнер + поля + submit
   ============================================================ */

.pa-registration-form {
  width: 36.5rem !important;
  max-width: 36.5rem;
  padding: 0 0 32px 0;
  /* background: transparent — раньше был #fff, выглядел белым
     прямоугольником поверх pz-page__content. Теперь форма
     наследует фон родительского контейнера */
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  margin: 0 auto;
  flex: 0 0 auto !important;
}

/* .registration-form-content layout-flex правила — template-specific:
   .default использует scrollable column-layout с align-content/flex-wrap,
   unauth — компактный row-layout. Описаны в .default/style.css и
   unauth/style.css соответственно. */

.program-description {
  font-size: 90%;
  line-height: 1.4;
  color: #666;
}

.program-description a {
  color: #007bff;
  text-decoration: underline;
}

.program-description a:hover {
  color: #0056b3;
  text-decoration: none;
}

.pa-registration-form h1 {
  font-size: 24px;
  font-weight: 400;
  color: #29373d;
  margin-bottom: 8px;
  line-height: 1.4;
}

.pa-registration-form__description {
  font-size: 14px;
  color: #29373d;
  margin-bottom: 24px;
  line-height: 1.6;
}

.pa-registration-form__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px !important;
  position: relative;
}

.pa-registration-form__input-container {
  position: relative;
  margin-bottom: 16px !important;
}

.pa-registration-form__input-group {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  width: 100%;
}

.pa-registration-form__input-group .pa-registration-form__input-container {
  flex: 1;
  margin-bottom: 0 !important;
}

.pa-registration-form__floating-label {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 15px;
  color: #999;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  pointer-events: none;
  transition: all 0.18s linear;
  transform-origin: left top;
  opacity: 0.5;
}

.pa-registration-form__input-container--has-value
  .pa-registration-form__floating-label,
.pa-registration-form__input-container:focus-within
  .pa-registration-form__floating-label {
  top: 6px;
  left: 11px;
  font-size: 12px;
  opacity: 1;
  transform: translateY(-2px);
  color: #999;
}

.pa-registration-form__row label {
  font-size: 14px;
  color: #29373d;
  font-weight: 400;
  margin-bottom: 4px;
}

.pa-registration-form__error {
  color: var(--pa-reg-accent);
  margin-bottom: 16px;
  padding: 12px;
  background: #f8d7da;
  border-radius: 4px;
  font-size: 14px;
}

.pa-registration-form__success {
  color: #155724;
  margin-bottom: 16px;
  padding: 12px;
  background: #d4edda;
  border-radius: 4px;
  font-size: 14px;
}

.pa-registration-form__inn-container {
  display: flex;
  gap: 10px;
  align-items: center;
}

.pa-registration-form__inn-container > div {
  flex: 1;
}

.pa-registration-form__inn-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.pa-registration-form__inn-row > div {
  flex: 1;
}

.pa-registration-form__inn-row input {
  width: 100%;
}

/* Подсказки под полями рисует общий .pz-field-alert (assets/components/input.css) */

.pa-registration-form__person-ip,
.pa-registration-form__person-ul,
.pa-registration-form__person-common,
.pa-registration-form__divider {
  display: none;
}

.pa-registration-form__section-title {
  font-size: 16px;
  font-weight: 500;
  color: #29373d;
  margin: 24px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

/* ============================================================
   8. CONSENT — compact block
   ============================================================ */

.pa-registration-form__consent-compact-section {
  margin: 10px 0;
  padding: 16px;
  background: rgba(255, 107, 53, 0.05);
  border: 1px solid rgba(255, 107, 53, 0.2);
  border-radius: 4px;
  border-left: 4px solid var(--pa-reg-accent);
  overflow: hidden;
  word-wrap: break-word;
  box-sizing: border-box;
}

.pa-registration-form__consent-compact-label {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.6;
  color: #29373d;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.pa-registration-form__consent-compact-checkbox {
  position: relative !important;
  opacity: 1 !important;
  width: 14px;
  height: 14px;
  margin: 3px 10px 0 0;
  flex-shrink: 0;
  cursor: pointer !important;
  accent-color: var(--pa-reg-accent);
  border: 2px solid var(--pa-reg-accent);
  border-radius: 3px;
  background: white;
  vertical-align: middle;
}

.pa-registration-form__consent-compact-checkbox:checked {
  background-color: var(--pa-reg-accent);
}

.pa-registration-form__consent-compact-text {
  flex: 1;
  color: #29373d;
  font-weight: 400;
  line-height: 1.4;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
  box-sizing: border-box;
}

/* "Подробнее" листает витрину к слайду программы (JS), но по смыслу это
   вспомогательная ссылка, а не основное действие формы — заказчик просил
   заменить сплошную заливку на обычный текст. Тег остаётся <button> (несёт
   JS-поведение), поэтому общее правило секции 11 «.pa-registration-form
   button» (заливка + фикс. размер) перебиваем двойным классом: та же
   специфичность недостаточна у одного .program-details-link (0,1,0 < 0,1,1
   у «button» с тегом), а .pa-registration-form .program-details-link даёт
   (0,2,0) и побеждает независимо от порядка в каскаде. */
.pa-registration-form .program-details-link {
  width: auto;
  height: auto;
  margin: 4px 0 0;
  padding: 0;
  background: none;
  border: none;
  appearance: none;
  color: var(--pa-reg-accent);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.pa-registration-form .program-details-link:hover {
  text-decoration: underline;
}

.pa-registration-form .program-details-link:focus-visible {
  outline: 2px solid var(--pa-reg-accent);
  outline-offset: 2px;
}

/* ============================================================
   8b. INPUTS внутри .pa-registration-form — overrides
   ============================================================ */

.pa-registration-form input[type="text"],
.pa-registration-form input[type="email"],
.pa-registration-form input[type="tel"],
.pa-registration-form input[type="date"] {
  width: 100% !important;
  height: 56px !important;
  padding: 30px 10px 12px 10px !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  border-radius: 4px !important;
  background: rgba(0, 0, 0, 0.04) !important;
  font-size: 15px !important;
  color: #29373d !important;
  font-family: "Open Sans", sans-serif !important;
  transition: all 0.2s ease;
}

.pa-registration-form__input-container input[type="text"],
.pa-registration-form__input-container input[type="email"],
.pa-registration-form__input-container input[type="tel"],
.pa-registration-form__input-container input[type="date"] {
  width: 100% !important;
  height: 56px !important;
  padding: 30px 10px 12px 10px !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  border-radius: 4px !important;
  background: rgba(0, 0, 0, 0.04) !important;
  font-size: 15px !important;
  color: #29373d !important;
  font-family: "Open Sans", sans-serif !important;
  transition: all 0.2s ease;
}

.pa-registration-form input::placeholder {
  color: #999 !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: -0.01px !important;
  text-align: left !important;
}

/* vendor-prefixed placeholder варианты (-webkit-input-placeholder,
   -moz-placeholder, -ms-input-placeholder) удалены — стандартный
   ::placeholder выше уже покрывает все современные браузеры. */

.pa-registration-form input[type="date"]::-webkit-calendar-picker-indicator {
  background: transparent;
  color: #29373d;
  cursor: pointer;
  font-size: 16px;
}

.pa-registration-form input[type="date"]::-webkit-inner-spin-button,
.pa-registration-form input[type="date"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pa-registration-form input[type="date"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.pa-registration-form input[type="date"]:in-range::-webkit-datetime-edit-text {
  color: transparent !important;
}

.pa-registration-form
  input[type="date"]:in-range::-webkit-datetime-edit-year-field,
.pa-registration-form
  input[type="date"]:in-range::-webkit-datetime-edit-month-field,
.pa-registration-form
  input[type="date"]:in-range::-webkit-datetime-edit-day-field {
  color: #29373d !important;
}

.pa-registration-form input[type="date"]::-webkit-datetime-edit-text {
  color: transparent !important;
}

.pa-registration-form input[type="date"]::-webkit-datetime-edit-year-field,
.pa-registration-form input[type="date"]::-webkit-datetime-edit-month-field,
.pa-registration-form input[type="date"]::-webkit-datetime-edit-day-field {
  color: #29373d !important;
}

.pa-registration-form input[type="date"]::placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

.pa-registration-form input[type="date"]:not(:valid) {
  color: transparent !important;
}

.pa-registration-form input[type="date"]:valid {
  color: #29373d !important;
}

.pa-registration-form input[type="text"]:focus,
.pa-registration-form input[type="email"]:focus,
.pa-registration-form input[type="tel"]:focus,
.pa-registration-form input[type="date"]:focus {
  outline: none;
  background: #fff !important;
  border-color: var(--color-orange) !important;
}

.pa-registration-form button[type="submit"] {
  width: 100% !important;
  height: 52px !important;
  padding: 15px 20px !important;
  border: 0;
  border-radius: 4px !important;
  background: var(--color-orange) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-top: 8px;
}

.pa-registration-form button[type="submit"]:hover {
  background: var(--color-orange);
}

.pa-registration-form button[type="submit"]:disabled {
  opacity: 0.6;
}

.pa-registration-form__inn-continue {
  height: 56px !important;
  padding: 15px 20px !important;
  border: 0;
  border-radius: 4px !important;
  background: var(--color-orange) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.pa-registration-form__inn-continue:hover {
  background: var(--color-orange);
}

.pa-registration-form__inn-continue:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Индикатор поиска компании по ИНН. Живёт в самом компоненте, а не в общих
   ассетах контура: install-комплект модуля переносит только каталог компонента,
   спиннер из темы на целевой машине мог бы не приехать. */
.pa-registration-form__inn-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6);
}

.pa-registration-form__inn-status[hidden] {
  display: none;
}

.pa-registration-form__inn-spinner {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: var(--color-orange);
  border-radius: 50%;
  animation: pa-registration-form-spin 0.8s linear infinite;
}

@keyframes pa-registration-form-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Пользователю, попросившему меньше движения, крутящийся круг не показываем —
   индикатор остаётся статичной точкой, текст рядом несёт тот же смысл. */
@media (prefers-reduced-motion: reduce) {
  .pa-registration-form__inn-spinner {
    animation: none;
    border-top-color: rgba(0, 0, 0, 0.15);
    background: var(--color-orange);
  }
}

/* Поясняющая строка над автозаполненными реквизитами */
.pa-registration-form__autofill-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.7);
}

.pa-registration-form__autofill-note[hidden] {
  display: none;
}

.pa-registration-form hr {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}

/* ============================================================
   9. CONSENT MODAL — pa-registration-form__consent-modal-*
   ============================================================ */

.pa-registration-form__consent-modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pa-registration-form__consent-modal-content {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 80%;
  max-width: 800px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pa-registration-form__consent-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  background: #f8f9fa;
}

.pa-registration-form__consent-modal-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.pa-registration-form__consent-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0 5px;
  height: auto;
  transition: background-color 0.2s ease;
}

.pa-registration-form__consent-modal-close:hover {
  color: #333;
  background-color: #f0f0f0;
}

.pa-registration-form__consent-modal-body {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.pa-registration-form__consent-modal-text {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  white-space: pre-line;
  padding: 10px;
  background: #f8f8f8;
  border-radius: 6px;
  border-left: 3px solid var(--pa-reg-accent);
}

.pa-registration-form__consent-modal-footer {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 15px 20px;
  border-top: 1px solid #eee;
  background: #f8f9fa;
}

.pa-registration-form__consent-modal-footer button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  height: auto;
}

/* Consent-modal рендерится в pz-page__container — ВНЕ .pa-registration-form
   scope, поэтому локальная переменная --pa-reg-accent тут не видна.
   Используем var(--pz-color-accent) с fallback на захардкоженный orange
   чтобы кнопка-accept была видна и в stand-alone-сценарии. */
.pa-registration-form__consent-modal-footer #consent-modal-accept {
  background: var(--pz-color-accent, #d45b40);
  color: white;
}

/* Ссылка «Согласие на ПДн» — оранжевый с подчёркиванием.
   Раньше класс был .consent-link и стилизовался layout-CSS;
   после rename на BEM правил не было — текст отображался
   фиолетовым (--color-additional от внешнего CSS). */
.pa-registration-form__consent-link {
  color: var(--pa-reg-accent);
  text-decoration: underline;
  cursor: pointer;
}

.pa-registration-form__consent-link:hover {
  color: var(--pa-reg-accent);
  text-decoration: none;
}

.pa-registration-form__consent-modal-footer #consent-modal-reject {
  background: #6c757d;
  color: white;
}

/* ============================================================
   10. GENERIC MODAL внутри .pa-registration-form
   ============================================================ */

.pa-registration-form__modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.pa-registration-form__modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.pa-registration-form__modal-content {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  max-width: 520px;
  width: calc(100% - 32px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.pa-registration-form__modal-title {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 8px;
}

.pa-registration-form__modal-text {
  color: #333;
  margin-bottom: 14px;
}

.pa-registration-form__modal-button {
  width: 100%;
}

/* ============================================================
   11. SCOPED GLOBAL OVERRIDES внутри .pa-registration-form
   ============================================================ */

.pa-registration-form button,
.pa-registration-form [type="button"],
.pa-registration-form [type="reset"],
.pa-registration-form [type="submit"] {
  -webkit-appearance: button;
}

.pa-registration-form button {
  border-radius: 4px;
  color: white;
  background: var(--pa-reg-accent);
  position: static;
  width: 164px;
  height: 37px;
  flex: none;
  order: 3;
  flex-grow: 0;
  margin: 0px 0px;
  border-width: 0px;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0px;
  text-align: center;
}

.pa-registration-form button,
.pa-registration-form select {
  text-transform: none;
}

.pa-registration-form button,
.pa-registration-form input {
  overflow: visible;
}

.pa-registration-form input[type="text"]:not([class]),
.pa-registration-form input[type="email"]:not([class]),
.pa-registration-form input[type="password"]:not([class]),
.pa-registration-form input[type="number"]:not([class]),
.pa-registration-form input[type="url"]:not([class]),
.pa-registration-form input[type="tel"]:not([class]),
.pa-registration-form input[type="search"]:not([class]),
.pa-registration-form textarea:not([class]),
.pa-registration-form select:not([class]) {
  width: 100%;
  border: 1px solid var(--color-light-dark);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-m);
  line-height: 1.5;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

/* ============================================================
   12. MEDIA QUERIES
   ============================================================ */

@media (max-width: 1023px) {
  /* Витрина программ идёт в DOM после формы (unauth/template.php: сначала
     .registration-form, следом компонент витрины). На телефоне она должна быть
     сверху — поднимаем её через order, разметку не трогаем.
     ВАЖНО: именно order, а НЕ column-reverse. column-reverse укладывает детей от
     нижнего края, и переполнение уходит вверх, за block-start; такое переполнение
     браузер прокруткой не отдаёт — замерено 13.08: документ имел scrollHeight 844
     при контенте ~4900px, витрина оказывалась на -4027px и была недостижима.
     height: auto обязателен: auth-shell.css фиксирует контейнер в 100vh, и без
     этого колонка не может вырасти под лендинг. */
  .registration-container {
    flex-direction: column;
    height: auto;
  }

  /* Правило «.registration-image { display: none }» убрано намеренно: витрина —
     содержательный блок, на мобильном он нужен. Заодно оно и не действовало:
     на том же элементе висит класс .pa-showcase, а компонент витрины объявляет
     «.pa-showcase { display: flex }» голым селектором той же специфичности
     (0,1,0) и попадает в общий бандл позже — замерено в CSSOM 13.08, computed
     display был flex. */

  /* Составной классовый селектор (0,2,0), а не голый: конкурент —
     «.registration-image { flex: 1 }» (0,1,0), объявленный позже по каскаду,
     голое правило здесь проиграло бы. Составной, а не дочерний комбинатор:
     он не зависит от глубины вложенности и переживёт появление промежуточной
     обёртки в разметке (в кабинетном шаблоне такая обёртка уже есть).
     Витрина всегда рендерит оба класса вместе (showcase/template.php:20,30).
     flex: none вместо flex: 1 1 0%: в колонке базис 0 вместе с overflow: hidden
     схлопывал витрину до высоты собственных отступов (~39 px) и резал слайд.
     height: auto возвращает высоту по содержимому. */
  .registration-image.pa-showcase {
    order: -1;
    flex: none;
    height: auto;
  }

  /* Левая колонка на десктопе скроллится своим контейнером (overflow-y: auto,
     высота от флекса). На телефоне это второй скролл внутри страницы: часть
     анкеты оказывается недостижимой, когда сама страница уже прокручена.
     Отдаём прокрутку странице. */
  .registration-form,
  .registration-form .registration-form-content {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .registration-form {
    padding: var(--spacing-lg);
  }

  /* Форма свёрстана под фиксированные 36.5rem (≈511 px) — шире мобильного
     вьюпорта, из-за чего .registration-form-content (row-layout с
     overflow-x: auto) обрезал её по правому краю. На ≤1023px растягиваем форму
     по ширине контейнера.
     !important нужен там, где он есть у исходного объявления: `width: 36.5rem`
     на .pa-registration-form и `max-width` на .form-content выше по файлу
     заданы с !important. У `max-width: 36.5rem` самой .pa-registration-form
     !important нет — там хватает порядка каскада. */
  .pa-registration-form {
    width: 100% !important;
    max-width: 100%;
  }

  .pa-registration-form .form-content {
    max-width: 100% !important;
  }
}

@media (max-width: 1280px) {
  .registration-image-content {
    width: 85%;
    height: auto;
  }
}

@media (max-height: 700px) {
  .registration-image-content {
    width: 65%;
    height: auto;
  }

  .pa-registration-form .form-group {
    margin-bottom: var(--spacing-m);
  }

  .pa-registration-form input[type="text"],
  .pa-registration-form input[type="email"],
  .pa-registration-form input[type="password"],
  .pa-registration-form input[type="number"],
  .pa-registration-form input[type="tel"] {
    padding: var(--spacing-sm);
  }
}

@media (max-width: 768px) {
  .pa-registration-form__consent-modal-content {
    width: 95%;
    margin: 20px;
  }

  .pa-registration-form__consent-modal-header,
  .pa-registration-form__consent-modal-body,
  .pa-registration-form__consent-modal-footer {
    padding: 15px;
  }

  .pa-registration-form__consent-modal-text {
    max-height: 300px;
    font-size: 13px;
  }

  .pa-registration-form__consent-modal-footer {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .pa-registration-form__payer-type-option {
    padding: 14px 16px;
  }

  .pa-registration-form__payer-type-option .payer-radio-circle {
    width: 18px;
    height: 18px;
    margin-right: 12px;
  }

  .pa-registration-form__payer-type-option span {
    font-size: 14px;
  }
}

.no-programs-available {
  text-align: center;
  padding: var(--spacing-lg);
  color: var(--pa-reg-text);
  font-size: var(--font-size-m);
}

/* Состояние ошибки поля — красная рамка, в том числе под фокусом.
   !important нужен потому, что базовые правила поля задают border с !important.
   Второй класс в селекторе даёт перевес по специфичности над базовым правилом
   поля, а вариант с :focus — над правилом фокуса (оно тоже красит border-color
   с !important). Это не дубль: без него рамка под фокусом решалась бы порядком
   блоков в файле, и любая перестановка молча вернула бы оранжевую.
   Атрибут aria-invalid ставит общий компонент PfFieldAlert, дублировать нечего. */
.pa-registration-form
  .pa-registration-form__input-container
  input[aria-invalid="true"],
.pa-registration-form
  .pa-registration-form__input-container
  input[aria-invalid="true"]:focus {
  border-color: var(--danger, #e74c3c) !important;
}

/* То же состояние ошибки у чекбокса согласия на ПДн. Правило выше до него не
   дотягивается: чекбокс лежит вне .pa-registration-form__input-container, —
   а BORDER_MAP общего PfFieldAlert знает только классы .pz-field__input и
   .pz-input, поэтому рамку не ставит и он (метод при этом возвращает true).
   Галка согласия одна, и без отметки «что именно не так» читается только из
   текста. У группы программ отметки нет намеренно: подсвечивать одну карточку
   из нескольких бессмысленно — отметить нужно любую. Селектор поэтому идёт по
   data-role, а не по классу: класс pa-registration-form__consent-compact-checkbox
   носят и чекбоксы программ, и правило зависело бы от того, что лестница
   аккуратно снимает у них aria-invalid.

   Рамку даём outline'ом, а не border'ом. Чекбокс рендерится нативным
   виджетом (appearance: auto), и author-объявления border на нём браузер не
   применяет вовсе: у элемента border-width считается 0px, border-style none,
   а border-color сваливается в currentColor — по этой же причине давно
   бесполезен border в базовом правиле чекбокса выше. Переводить его в
   appearance: none ради рамки нельзя: исчезнет сама галка. Outline виджет не
   переопределяет, и рамка появляется там, где нужно. */
.pa-registration-form
  [data-role="partner-registration-consent-checkbox"][aria-invalid="true"] {
  outline: 2px solid var(--danger, #e74c3c);
  outline-offset: 1px;
}

/* …и то же состояние под клавиатурным фокусом. Кольцо фокуса рисуется тем же
   свойством outline, поэтому правило выше его просто вытесняло: замерено на
   стенде — «ошибочен» и «ошибочен и в фокусе» давали одинаковые 2px/1px, тогда
   как без ошибки кольцо темы даёт 2px/2px другого цвета. Именно на этот
   чекбокс лестница ставит фокус, чтобы показать, куда смотреть, — и показывать
   было нечего.
   Цвет оставляем красным: ошибка никуда не делась и важнее темы. Различие
   даём геометрией — толще и дальше от галки. */
.pa-registration-form
  [data-role="partner-registration-consent-checkbox"][aria-invalid="true"]:focus-visible {
  outline-width: 3px;
  outline-offset: 3px;
}

/* End */


/* Start:/local/components/zabotix/partner.affiliate.showcase/templates/.default/style.css?178784172850084*/
/* ============================================================
 * Витрина программ — pa-showcase
 * Дизайн: направление «2 · тёмная витрина» (Claude Design).
 * Плоские классы pa-showcase-*, data-js в стилях не участвуют.
 *
 * Все величины сведены в приватные --pa-* с фолбэками: наборы токенов в
 * контурах разные. В гостевом auth-shell (styles_frame/tokens.css) есть
 * spacing и font-size, но радиусы называются border-radius-*;
 * в кабинете (assets/tokens.css) есть radius-*, но нет ни spacing,
 * ни font-size, ни transition-base. Токена radius-pill не существует
 * нигде — без фолбэка точки-пилюли стали бы квадратными.
 * ЗВЁЗДОЧКА СО СЛЕШЕМ ВНУТРИ КОММЕНТАРИЯ ЗАКРЫВАЕТ ЕГО ДОСРОЧНО и съедает
 * следующий блок — поэтому имена токенов здесь пишутся без «*».
 * ============================================================ */

.pa-showcase {
  /* Палитра направления */
  /* Цвета сверены с фирменной палитрой темы (assets/tokens.css). Значения
     продублированы числами, а не взяты через var(): в гостевом auth-shell
     грузится styles_frame/tokens.css, где --accent и --additional отсутствуют,
     и витрина осталась бы без цвета. Пары «токен → число» держим синхронно. */
  --pa-bg: #0f1a2f;              /* --header-bg; была своя копия #10162e */
  --pa-title-color: #ffffff;
  --pa-text-color: rgba(237, 237, 242, 0.82);
  --pa-link-color: #f59e0b;      /* --warning; был жёлтый #ffd24a */
  --pa-marker-color: #d45b40;    /* --accent; был кричащий коралл #ff5a3c */
  --pa-dot-idle: rgba(255, 255, 255, 0.28);
  --pa-dot-on: #ffffff;
  /* Токена --color-orange не существует ни в одном контуре: правило всегда
     падало в фолбэк, а var() лишь маскировал это. Пишем цвет напрямую. */
  --pa-focus: #d45b40;

  /* Размеры и ритм */
  /* Радиусы заданы числом, а не токеном: одноимённые токены в контурах имеют
     разные значения (в кабинете --radius-md = 10px, в макете — 8px), и
     слайд выглядел бы по-разному на гостевой странице и в кабинете. */
  --pa-radius-sm: 4px;
  --pa-radius-pill: 50px;
  --pa-gap: var(--spacing-lg, 1.375rem);
  /* Отступы колонки и просвет до точек взяты из макета правой части
     авторизации (styles_frame/registration.css): padding var(--spacing-xxl)
     = 50 px, а .registration-image-text отделён от точек на 34 px. */
  --pa-gap-xxl: var(--spacing-xxl, 3.125rem);
  --pa-gap-dots: 2.125rem;
  --pa-gap-sm: var(--spacing-sm, 0.5rem);
  --pa-gap-m: var(--spacing-m, 0.75rem);
  --pa-gap-md: var(--spacing-md, 1rem);
  --pa-title-size: 32px;
  --pa-title-weight: var(--font-weight-bold, 700);
  --pa-text-size: var(--font-size-m, 1rem);
  --pa-text-size-s: var(--font-size-s, 0.875rem);
  --pa-dot-size: 8px;
  --pa-dot-gap: 6px;    /* просвет между соседними точками */
  --pa-dot-ext: 20px;   /* насколько пилюля длиннее точки: 8 + 20 = 28 */
  --pa-dot-fade: 0.28;  /* приглушённость неактивной точки */
  --pa-hit-y: 8px;      /* запас под палец сверху и снизу, в поток не идёт */
  --pa-anim: var(--transition-base, 0.3s ease);

  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Раскладка прежней правой части авторизации: контент прижат к низу колонки и
     к левому краю, точки — под ним, тоже слева (styles_frame/registration.css:
     .registration-image { justify-content: flex-end }). */
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--pa-gap-dots);
  /* Высота не задаётся: блок равен своему содержимому — самому высокому слайду
     плюс точки. На гостевых страницах колонку всё равно растягивает флекс
     родителя (align-items: stretch), и слайд встаёт по центру. Фиксированная
     высота давала «анкету»: пустое поле во весь экран. */
  /* Узкая колонка: отступы ужимаются, текст не превращается в столбик. */
  padding: clamp(var(--pa-gap), 5%, var(--pa-gap-xxl));
  background: var(--pa-bg);
  /* Декор (::before/::after) остаётся на месте: прокручивается только трек. */
  overflow: hidden;
}

/* Тема гостевых страниц объявляет .registration-image с padding:
   var(--spacing-xxl) — та же специфичность, что у .pa-showcase, но позже в
   каскаде, поэтому побеждала она и отступы оставались 50 px вместо 22 px.
   Двойной класс (0,2,0) — тот же элемент, специфичность выше. */
.registration-image.pa-showcase {
  padding: clamp(var(--pa-gap), 5%, var(--pa-gap-xxl));
}

/* Атмосферный слой: один эффект на ::after, поверх фонового робота, под
   контентом.

   Третья итерация палитры, и обе прежние отпали по одной причине — смешение.
   Оранжевый с синим (первая версия) давал «цвет грязи»: это комплементарные
   цвета, и градиент между ними обязан пройти через десатурированную серо-
   коричневую середину — оттенками это не лечится. Уход в холодную пару
   «индиго → бирюза» (вторая версия) грязь убрал, но бирюза #40d0e0 в теме
   сайта не существует, и владелец справедливо увидел, что витрина «уходит в
   зелёный» и выбивается из общей темы.

   Здесь смешиваются только соседи по синей ветви, все три — фирменные:
   --additional (#6471b2) → --header-bg (#0f1a2f) → --additional-light
   (#7e8ac4). Переход чистый, потому что цвета родственные, зелени нет вовсе.
   Тёмно-синий стоит средним стопом намеренно: владелец отмечал, что
   фирменного тёмно-синего в анимации «прям очень мало» — теперь он участвует
   в самом переливе, а не только лежит подложкой.

   Тёплый акцент (--pa-marker-color, --pa-link-color) в градиенте не участвует
   вообще: он работает точечно на маркерах и ссылках. Именно это разведение по
   ролям, а не подбор оттенков, и снимает проблему грязи. */
.pa-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    rgba(100, 113, 178, 0.48),
    rgba(15, 26, 47, 0.55) 45%,
    rgba(126, 138, 196, 0.3)
  );
  background-size: 260% 260%;
  animation: pa-shift 11s ease-in-out infinite alternate;
}

@keyframes pa-shift {
  from { background-position: 0% 0%; }
  to { background-position: 100% 100%; }
}

/* Фоновый робот — водяной знак в правом верхнем углу, как прежняя
   .registration-image-content (position: absolute; top: 0; right: 0). Робот
   векторный и целый, поэтому без отрицательных сдвигов: реплика чата должна
   помещаться в кадр, иначе от неё виден один хвостик. */
.pa-showcase-bot {
  position: absolute;
  top: 0;
  /* Отступ справа считается от ШИРИНЫ САМОГО БОТА, а не колонки. Проценты в
     right Bitrix-страница отдала бы от ширины колонки, и пара отступов держалась
     бы ровно на одной ширине экрана: при узкой колонке бот занимает свои 90% и
     всё сходится, а на широкой он упирается в потолок 600px, тогда как -15%
     колонки продолжают расти — замерено 45px сверху против 12px справа на
     колонке 970. Здесь же обе величины пропорциональны одному масштабу SVG.

     Арифметика: справа от уха внутри холста лежит поле в 16.25 единиц из 62.
     Прячем 10.25 из них за краем колонки, оставляя видимыми 6 — ровно столько,
     сколько отведено сверху (viewBox начинается с -6, см. _bot.php). Отсюда и
     пара «сверху = справа» на любой ширине.
     Дальше вправо не двигаем: там начинает обрезаться реплика чата, ради этого
     сдвига уже ужатая. */
  right: calc(var(--pa-bot-width) * -10.25 / 62);
  /* Размер выровнен по оригиналу боевой страницы: там .registration-image-content
     — PNG 600x611, выводимый в натуральную величину, без ограничения по ширине
     колонки. Прежние 25rem давали всего ~350px, потому что корневой шрифт этой
     страницы 14px, а не 16px, — бот усох почти вдвое, что владелец и заметил
     («голова этого бота тоже побольше»). Потолок задан в px именно поэтому:
     rem здесь врёт. Процент оставлен, чтобы на узкой колонке водяной знак не
     занимал её целиком. */
  --pa-bot-width: min(90%, 600px);
  width: var(--pa-bot-width);
  color: var(--pa-title-color);
  opacity: 0.13;
  pointer-events: none;
  /* Смещение зрачков приходит из скрипта переменными. Диапазон держим здесь,
     а не в JS: капсула глаза узкая, и допустимый ход зрачка — вопрос
     геометрии рисунка, а не логики слежения. */
  --pa-pupil-x: 0px;
  --pa-pupil-y: 0px;
}

.pa-showcase-bot-pupil {
  transform: translate(var(--pa-pupil-x), var(--pa-pupil-y));
  transition: transform 0.32s ease-out;
}

.pa-showcase-bot-svg {
  display: block;
  width: 100%;
  height: auto;
  animation: pa-bot-float 7s ease-in-out infinite alternate;
}

/* Анимация «живого» бота: голова покачивается, глаза моргают, снизу всплывает
   реплика чата с печатающимися точками. Всё на CSS-кадрах: библиотека
   (motion.dev и подобные) ради трёх деклараций тянула бы в Bitrix-страницу
   лишний скрипт, а сборщика фронта здесь нет. */
@keyframes pa-bot-float {
  from { transform: translateY(0); }
  to { transform: translateY(-3%); }
}

.pa-showcase-bot-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: pa-bot-blink 6s ease-in-out infinite;
}

@keyframes pa-bot-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.08); }
}

/* Реплика чата не крутится по своему таймеру, а всплывает на смену слайда:
   робот «проговаривает» каждый экран витрины, и фоновая картинка оказывается
   связана с контентом, а не живёт отдельной жизнью. В покое пузыря нет. */
.pa-showcase-bot-chat {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.pa-showcase-bot.is-reacting .pa-showcase-bot-chat,
.pa-showcase-bot.is-approving .pa-showcase-bot-chat { animation: pa-bot-chat 3.2s ease-in-out both; }

/* Отметили программу — робот кивает и вместо печатающихся точек рисует
   галочку: подтверждение выбора приходит оттуда же, где он «говорит». */
.pa-showcase-bot.is-approving .pa-showcase-bot-head {
  transform-box: fill-box;
  transform-origin: 50% 15%;
  animation: pa-bot-nod 0.8s ease-in-out;
}

@keyframes pa-bot-nod {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(5deg); }
  65% { transform: rotate(-2deg); }
}

.pa-showcase-bot-check {
  stroke-dasharray: 15;
  stroke-dashoffset: 15;
  opacity: 0;
}

.pa-showcase-bot.is-approving .pa-showcase-bot-check {
  opacity: 1;
  animation: pa-bot-check 0.5s 0.25s ease-out forwards;
}

.pa-showcase-bot.is-approving .pa-showcase-bot-typing { opacity: 0; animation: none; }

@keyframes pa-bot-check {
  to { stroke-dashoffset: 0; }
}

@keyframes pa-bot-chat {
  0% { opacity: 0; transform: translateY(10%) scale(0.9); }
  14%, 78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(10%) scale(0.94); }
}

/* ── РУЧКИ НАПРАВЛЕНИЯ ВОЛН ─────────────────────────────────────────────────
   Куда летит веер и откуда выходит, задаётся только этими тремя числами.
   Единицы — единицы координат SVG (viewBox 0 -14 62 62), не экранные пиксели:
   вся голова робота шириной около 46 таких единиц.

   --pa-signal-angle  направление веера. 0deg — строго вправо (сейчас),
                      -45deg — вправо-вверх по диагонали, -90deg — вертикально
                      вверх, положительные значения кладут веер вниз.
   --pa-signal-x      сдвиг точки выхода вправо от кончика антенны (22.9, 0).
   --pa-signal-y      сдвиг точки выхода вниз от него же. Сейчас 3.5 / 3.5 —
                      правый край петли антенны, взятый чуть ниже её верха.
                      Именно чуть ниже: холст SVG ужат сверху до 3 единиц, чтобы
                      робот встал на своё место (см. _bot.php), и веер, поднятый
                      выше, срезался бы верхней кромкой кадра.

   Что важно знать, подбирая. Веер раскрыт на ±30° от своей оси, а правый край
   антенны лежит вплотную к голове (её контур проходит через x=27.6 при y=1),
   поэтому нижняя половина горизонтального веера идёт по линии головы: прогон
   точек дуг через body.isPointInFill даёт 61 касание при нынешних 0deg против
   нуля, если довернуть ось к -45deg. Голова нарисована контуром, а не залита,
   так что читается это как перекрестье тонких линий, а не как клякса.

   Чистый горизонтальный веер без касаний возможен только подъёмом точки выхода
   заметно выше макушки — но тогда волны отрываются от антенны, а верхнюю кромку
   кадра держит ужатый холст SVG. Если понадобится, третий путь — укоротить сами
   дуги в _bot.php: там и радиусы, и раствор. */
.pa-showcase-bot-signal {
  --pa-signal-angle: 0deg;
  --pa-signal-x: 3.5px;
  --pa-signal-y: 3.5px;
  /* Поворот считается вокруг кончика антенны, а не вокруг угла холста. */
  transform-origin: 22.9px 0;
  transform: translate(var(--pa-signal-x), var(--pa-signal-y)) rotate(var(--pa-signal-angle));
}

/* Волны сигнала от «уха» — робот на связи. Расходятся по очереди и медленно:
   на фоне это должно жить, а не мельтешить рядом с формой. */
.pa-showcase-bot-signal path {
  transform-box: fill-box;
  /* Волны уходят вправо от кончика антенны, поэтому точка роста — левый край
     дуги, ближний к антенне. Пока сигнал раскрывался вверх, здесь стояло
     bottom center; с ним развёрнутые дуги росли бы снизу вверх поперёк
     собственного хода. */
  transform-origin: left center;
  opacity: 0;
  animation: pa-bot-signal 3.4s ease-out infinite;
}

.pa-showcase-bot-signal path:nth-child(2) { animation-delay: 0.35s; }
.pa-showcase-bot-signal path:nth-child(3) { animation-delay: 0.7s; }

@keyframes pa-bot-signal {
  0% { opacity: 0; transform: scale(0.72); }
  22% { opacity: 0.85; }
  55% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

.pa-showcase-bot-typing { animation: pa-bot-typing 1.2s ease-in-out infinite; }
.pa-showcase-bot-typing:nth-of-type(2) { animation-delay: 0.15s; }
.pa-showcase-bot-typing:nth-of-type(3) { animation-delay: 0.3s; }

@keyframes pa-bot-typing {
  0%, 60%, 100% { opacity: 0.35; }
  30% { opacity: 1; }
}

.pa-showcase-track,
.pa-showcase-dots {
  position: relative;
  z-index: 1;
}

/* Трек: слайды лежат в одной ячейке грида — высота по самому высокому,
   без absolute и без прыжков при переключении. */
.pa-showcase-track {
  display: grid;
  /* Все слайды в одной ячейке: высота трека равна самому высокому из них и не
     меняется при листании. Трек не растягивается по свободному месту — высота
     идёт от наполнения, а не от размера колонки.
     center, а не stretch: короткий слайд встаёт по центру ячейки, а не липнет
     к верху под пустотой в высоту самого длинного. */
  align-items: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  /* Ширина текстовой колонки прежней правой части (.registration-image-text):
     строка не растягивается на всю ширину и не наезжает на фонового робота. */
  max-width: 29.625rem;
  flex: 0 0 auto;
  container-type: inline-size;
}

/* Переход между слайдами по действию пользователя рисует браузер: имя
   участника нужно только треку, содержимое слайдов внутри него сводится
   кроссфейдом целиком. Правила ::view-transition-* браузером без поддержки
   API просто игнорируются. */
.pa-showcase-track { view-transition-name: pa-showcase-track; }

::view-transition-old(pa-showcase-track) { animation: pa-vt-out 0.2s ease both; }
::view-transition-new(pa-showcase-track) { animation: pa-vt-in 0.32s ease both; }

@keyframes pa-vt-out {
  to { opacity: 0; transform: translateY(-10px); }
}

@keyframes pa-vt-in {
  from { opacity: 0; transform: translateY(16px); }
}

/* Перелёт карточки программы в слайд («Подробнее»). Группа задаёт траекторию и
   темп движения, old/new — растворение карточки и проявление слайда. Дольше
   обычного переключения: движение через всю ширину экрана должно читаться
   глазом, а не мелькать. z-index поднимает летящий снимок над колонками. */
::view-transition-group(pa-showcase-fly) {
  animation-duration: 0.62s;
  animation-timing-function: cubic-bezier(0.22, 0.75, 0.2, 1);
  z-index: 20;
}

::view-transition-old(pa-showcase-fly) { animation: pa-vt-out 0.28s ease-in both; }
::view-transition-new(pa-showcase-fly) { animation: pa-vt-in 0.42s 0.16s ease-out both; }

/* «Подробнее» нажимают в левой колонке, а переключается правая — вспышка по
   контуру ставит точку в конце перелёта. */
.pa-showcase.is-pulse { animation: pa-pulse 0.9s ease-out; }

@keyframes pa-pulse {
  0% { box-shadow: inset 0 0 0 0 rgba(120, 170, 255, 0); }
  30% { box-shadow: inset 0 0 0 3px rgba(120, 170, 255, 0.55); }
  100% { box-shadow: inset 0 0 0 3px rgba(120, 170, 255, 0); }
}

.pa-showcase-slide {
  grid-area: 1 / 1;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  width: 100%;
  /* Слайд без собственной подложки: ни фона, ни рамки, ни отступов — контент
     лежит прямо на фоне витрины и центрируется ею (justify-content: center).
     Рамка внутри рамки читалась как «анкета» и съедала ширину. */
  overflow-wrap: break-word;
  color: var(--pa-text-color);
  font-size: var(--pa-text-size);
  line-height: var(--line-height-base, 1.5);
  text-wrap: pretty;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--pa-anim), transform var(--pa-anim), visibility var(--pa-anim);
}

.pa-showcase-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Содержимое слайда — произвольный HTML из визуального редактора.
   Никаких обязательных обёрток: селекторы по тегам.
   Префикс .pa-showcase обязателен: гостевая тема раздаёт собственные margin
   через p:not([class]), ul:not([class]) и подобные — специфичность (0,1,1)
   против (0,1,0) у голого «.pa-showcase-slide > *», и побеждала тема. Из-за
   этого список уезжал вправо на её margin-left: 24px, а вертикальный ритм
   слайда подменялся отступами темы (над списком выходил ноль). */
.pa-showcase .pa-showcase-slide > * { margin: 0; }
.pa-showcase .pa-showcase-slide > * + * { margin-top: var(--pa-gap-md); }

/* Селекторы заголовков и абзаца намеренно с префиксом .pa-showcase: тема
   кабинета объявляет h1..h4:not([class]) и p:not([class]) с color: var(--text).
   Специфичность у них такая же, как у «.pa-showcase-slide h2» (0,1,1), а в
   каскаде они идут позже — и перекрашивали текст слайда в тёмный по тёмному. */
.pa-showcase .pa-showcase-slide h1,
.pa-showcase .pa-showcase-slide h2,
.pa-showcase .pa-showcase-slide h3,
.pa-showcase .pa-showcase-slide h4 {
  /* Заголовок масштабируется по ширине колонки (контейнерные единицы). */
  font-size: clamp(var(--pa-text-size), 8cqw, var(--pa-title-size));
  font-weight: var(--pa-title-weight);
  line-height: var(--line-height-tight, 1.16);
  color: var(--pa-title-color);
}

.pa-showcase .pa-showcase-slide h3 { font-size: clamp(var(--pa-text-size-s), 6cqw, calc(var(--pa-title-size) * 0.74)); }
.pa-showcase .pa-showcase-slide h4 { font-size: clamp(var(--pa-text-size-s), 5cqw, calc(var(--pa-title-size) * 0.62)); }
.pa-showcase .pa-showcase-slide p { color: var(--pa-text-color); }

/* Префикс .pa-showcase — по той же причине, что у заголовков и абзаца выше:
   гостевая тема объявляет strong:not([class]), b:not([class]) с color: var(--text).
   Специфичность у неё такая же (0,1,1), а в каскаде она позже — и жирный текст
   слайда становился тёмно-синим по тёмно-синему фону. */
.pa-showcase .pa-showcase-slide strong,
.pa-showcase .pa-showcase-slide b {
  font-weight: var(--font-weight-medium, 500);
  color: var(--pa-title-color);
}

/* Префикс .pa-showcase — как у заголовков: гостевая тема сбрасывает спискам
   list-style и padding-left правилом той же специфичности, но позже в каскаде,
   и пункты оставались без маркеров.
   padding-left: 0 — текст пунктов встаёт по одной левой линии с заголовком и
   абзацем слайда, маркеры при list-style-position: outside уходят в отступ
   витрины. Ноль объявлен явно, а не выкинут: без декларации вернётся дефолт
   браузера (40px) либо сброс темы, то есть отступ снова уедет.
   Отступы самого списка (margin) сюда не дублируем — их снимает правило
   «.pa-showcase .pa-showcase-slide > *» выше. */
.pa-showcase .pa-showcase-slide ul,
.pa-showcase .pa-showcase-slide ol {
  padding-left: 0;
  display: grid;
  gap: var(--pa-gap-sm);
  list-style-position: outside;
}

.pa-showcase .pa-showcase-slide ul { list-style-type: disc; }
.pa-showcase .pa-showcase-slide ol { list-style-type: decimal; }
.pa-showcase-slide li::marker { color: var(--pa-marker-color); }

.pa-showcase-slide img {
  display: block;
  width: 100%;
  height: auto;
  /* contain, а не cover: ограничение высоты защищает вёрстку от больших
     картинок из редактора, но обрезать иллюстрацию по краям оно не должно. */
  max-height: 16rem;
  object-fit: contain;
  border-radius: var(--pa-radius-sm);
}

.pa-showcase-slide a {
  color: var(--pa-link-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pa-showcase-slide a:hover { color: var(--pa-link-color); }

/* Кнопка-якорь к анкете. На десктопе форма и витрина видны одновременно —
   прокручивать некуда, кнопка не нужна; показывается только в списочном режиме
   (@media ≤1023px в конце файла).
   Тройной класс (0,3,0) обязателен: правило ссылок слайда выше
   («.pa-showcase .pa-showcase-slide a», 0,2,1) красит и подчёркивает любую
   ссылку внутри слайда, и кнопка получила бы жёлтый текст с подчёркиванием. */
.pa-showcase .pa-showcase-slide .pa-showcase-cta { display: none; }

.pa-showcase-dots {
  display: flex;
  justify-content: flex-start;
  /* Просвет задан не gap'ом, а половинками внутри бокса каждой точки: пилюля
     вылезает за свой бокс вправо и должна ложиться ровно в просвет, а gap
     флексбокса — внешний зазор, в него нельзя зайти содержимым. */
  gap: 0;
  /* Запас под пилюлю последней точки: её бокс шириной с точку, а нарисованное
     тело длиннее на --pa-dot-ext (см. ниже). Без запаса пилюля последнего
     слайда упёрлась бы в край колонки. */
  padding-right: var(--pa-dot-ext);
}

/* Геометрия точки-пилюли. Два решения, оба про «перетекание».

   1. Бокс точки шириной с ТОЧКУ, а не с пилюлю. Пилюля вылезает за свой бокс
      вправо, а точки правее неё сдвинуты на её длину. Значит место под пилюлю
      не зарезервировано заранее — оно реально освобождается уходящей и реально
      занимается приходящей. Ряд остаётся плотным, а суммарная ширина не
      меняется ни на кадр: сколько одна пилюля отдала, столько вторая взяла.
      Прежний бокс шириной с полную пилюлю освобождать было нечему — точки
      стояли редко, с дырами по 20px, и ничего никуда не перетекало.

   2. Пилюля собрана из ТРЁХ частей: неподвижный левый торец (::before),
      перемычка (.pa-showcase-dot-pill, тянется scaleX) и правый торец
      (::after, едет translateX). Оба торца — всегда круги 8×8 и никогда не
      масштабируются, поэтому капсула остаётся капсулой при любой длине, а при
      нулевой перемычке торцы совпадают и дают чистую точку.

      Так — а не «круг + растягиваемый хвост-капсула», как было: scaleX плющит
      и border-radius тоже, поэтому короткий хвост превращался в прямоугольник
      с плоскими торцами и вылезал из круга углами — в последнюю секунду цикла
      точка на миг становилась скруглённым квадратиком. Компенсировать радиусом
      в кадрах нельзя: border-radius не композитное свойство, и одна такая
      строка снимает анимацию с композитора на главный поток (проверено через
      getAnimations()).

   В кадрах — только transform, translate и opacity, то есть композитор. Ширину
   не анимируем принципиально: она layout-свойство, браузер снапит её к целому
   пикселю, и на диапазоне 20px за семь секунд это двадцать видимых ступеней —
   ровно то «тиканье», от которого уходили. */
.pa-showcase-dot {
  position: relative;
  box-sizing: content-box;
  width: calc(var(--pa-dot-size) + var(--pa-dot-gap));
  height: var(--pa-dot-size);
  /* Зона нажатия 14×24 без влияния на раскладку: padding растит бокс,
     отрицательный margin возвращает строке прежнюю высоту в 8px.
     Расширять зону по ГОРИЗОНТАЛИ тем же приёмом нельзя: боксы соседних точек
     начнут перекрываться на удвоенный запас, в перекрытии клик заберёт правый
     сосед, и нажатие рядом с кружком переключит не на тот слайд. */
  padding: var(--pa-hit-y) 0;
  margin: calc(var(--pa-hit-y) * -1) 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  /* Приглушённость неактивной точки задаётся прозрачностью КНОПКИ, а не цветом
     каждой части. Иначе на нахлёсте торцов и перемычки альфа складывается и
     стык проступает светлым пятном, а если развести части встык — между дугой
     круга и прямым краем перемычки открывается тёмный вырез. Прозрачность на
     общем родителе гасит обе беды разом: части рисуются непрозрачными, гасится
     результат. Побочно opacity, как и transform, композитное. */
  opacity: var(--pa-dot-fade);
  /* translate отдельным свойством от transform: точке правее пары одновременно
     нужны оба сдвига (уходящая освобождает место, приходящая занимает), и в
     одном transform они затирали бы друг друга. */
  transition: opacity var(--pa-anim), transform var(--pa-anim), translate var(--pa-anim);
}

/* Торцы. Оба лежат в одной точке; правый уезжает вправо на длину пилюли.
   Половина просвета слева — тот самый зазор между соседями. */
.pa-showcase-dot::before,
.pa-showcase-dot::after {
  content: '';
  position: absolute;
  top: var(--pa-hit-y);
  left: calc(var(--pa-dot-gap) / 2);
  width: var(--pa-dot-size);
  height: var(--pa-dot-size);
  border-radius: 50%;
  background: var(--pa-dot-on);
}

.pa-showcase-dot::after {
  transform: translateX(0);
  transition: transform var(--pa-anim);
}

/* Перемычка между торцами. Начинается в ЦЕНТРЕ левого торца и кончается в
   центре правого — оба стыка перекрыты кругами, поэтому её собственные плоские
   края не видны никогда. */
.pa-showcase-dot-pill {
  position: absolute;
  top: var(--pa-hit-y);
  left: calc(var(--pa-dot-gap) / 2 + var(--pa-dot-size) / 2);
  width: var(--pa-dot-ext);
  height: var(--pa-dot-size);
  background: var(--pa-dot-on);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--pa-anim);
}

/* Статика: автолистания нет (reduced-motion, мобильный список, остановленный
   таймер). Активная точка — пилюля, и точки правее неё сдвинуты на её длину:
   место занято по-настоящему. */
.pa-showcase-dot.is-active {
  opacity: 1;
}

.pa-showcase-dot.is-active::after {
  transform: translateX(var(--pa-dot-ext));
}

.pa-showcase-dot.is-active .pa-showcase-dot-pill {
  transform: scaleX(1);
}

.pa-showcase-dot.is-active ~ .pa-showcase-dot {
  translate: var(--pa-dot-ext) 0;
}

/* Индикатор обратного отсчёта до смены слайда.
   Владелец на созвоне: «размер пилюли активного слайда уменьшается, при этом
   одновременно увеличивается размер пилюли следующего; когда размер текущего
   становится точкой, а следующего — пилюлей, переключается слайд». Цель по его
   же словам — «помочь людям увидеть, когда у них слайд переключится».

   Анимация живёт под .is-autoplaying, который вешает и снимает сам таймер, а не
   под .is-active. Это важно: там, где автолистания нет — мобильный лендинг,
   prefers-reduced-motion, остановленный таймер — индикатор обязан быть
   статичным, иначе он обещает переключение, которого не будет.

   Длительность приходит из JS (--pa-autoplay), а не записана здесь числом:
   AUTOPLAY_MS остаётся единственным источником истины, и анимация не может
   разъехаться с таймером при правке одного из двух мест. */
/* Общие параметры цикла. Имена анимаций назначаются ниже по роли точки —
   отдельными свойствами, а не шорткатом: одной точке нужно сразу две анимации
   (своя яркость плюс сдвиг от соседа), и шорткат затирал бы одну другой.
   Ход ровный и длиной во весь цикл: по длине пилюли в любой момент видно,
   сколько осталось до переключения. */
.pa-showcase.is-autoplaying .pa-showcase-dot,
.pa-showcase.is-autoplaying .pa-showcase-dot::after,
.pa-showcase.is-autoplaying .pa-showcase-dot-pill {
  animation-duration: var(--pa-autoplay, 7000ms);
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* Распределение анимаций по ролям.
   pa-dot-close (свойство translate)  — сдвиг точек правее активной:   E → 0
   pa-dot-open  (свойство transform)  — сдвиг точек правее следующей:  0 → E
   Точка правее обеих получает обе: E-a плюс E-b даёт E, то есть стоит
   неподвижно. Порядок правил учитывает и перескок с последнего слайда на
   первый, когда следующая точка стоит ЛЕВЕЕ активной. */
.pa-showcase.is-autoplaying .pa-showcase-dot.is-next ~ .pa-showcase-dot {
  animation-name: pa-dot-open;
}

.pa-showcase.is-autoplaying .pa-showcase-dot.is-active {
  animation-name: pa-dot-dim;
}

.pa-showcase.is-autoplaying .pa-showcase-dot.is-next {
  animation-name: pa-dot-lit;
}

.pa-showcase.is-autoplaying .pa-showcase-dot.is-next ~ .pa-showcase-dot.is-active {
  animation-name: pa-dot-dim, pa-dot-open;
}

.pa-showcase.is-autoplaying .pa-showcase-dot.is-active ~ .pa-showcase-dot.is-next {
  animation-name: pa-dot-lit, pa-dot-close;
}

.pa-showcase.is-autoplaying .pa-showcase-dot.is-active ~ .pa-showcase-dot.is-next ~ .pa-showcase-dot {
  animation-name: pa-dot-close, pa-dot-open;
}

/* Сама пара: уходящая укорачивается ровно на столько же, на сколько удлиняется
   приходящая, и обе меняют длину в каждом кадре одновременно. */
.pa-showcase.is-autoplaying .pa-showcase-dot.is-active::after {
  animation-name: pa-cap-in;
}

.pa-showcase.is-autoplaying .pa-showcase-dot.is-active .pa-showcase-dot-pill {
  animation-name: pa-bar-shrink;
}

.pa-showcase.is-autoplaying .pa-showcase-dot.is-next::after {
  animation-name: pa-cap-out;
}

.pa-showcase.is-autoplaying .pa-showcase-dot.is-next .pa-showcase-dot-pill {
  animation-name: pa-bar-grow;
}

/* Пауза чтения (курсор над витриной, фокус внутри, палец на экране) замирает
   на текущем кадре, а не сбрасывает отсчёт. Раньше пауза снимала
   is-autoplaying — анимация исчезала, и пилюля скачком возвращалась к
   статическим 28px. JS при возобновлении досчитывает ровно остаток этой
   анимации, поэтому картинка и таймер не расходятся. */
.pa-showcase.is-paused .pa-showcase-dot,
.pa-showcase.is-paused .pa-showcase-dot::after,
.pa-showcase.is-paused .pa-showcase-dot-pill {
  animation-play-state: paused;
}

/* В кадрах ТОЛЬКО композитные свойства: transform, translate, opacity.
   border-radius сюда добавлять нельзя — он не композитный, и одна такая строка
   снимает всю анимацию с композитора обратно на главный поток. Проверено через
   getAnimations(): с радиусом в кадрах Chrome отдаёт список свойств, где рядом
   с transform стоят четыре borderRadius, и композитинга нет. */
@keyframes pa-cap-in {
  from { transform: translateX(var(--pa-dot-ext)); }
  to { transform: translateX(0); }
}

@keyframes pa-cap-out {
  from { transform: translateX(0); }
  to { transform: translateX(var(--pa-dot-ext)); }
}

@keyframes pa-bar-shrink {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes pa-bar-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes pa-dot-close {
  from { translate: var(--pa-dot-ext) 0; }
  to { translate: 0 0; }
}

@keyframes pa-dot-open {
  from { transform: translateX(0); }
  to { transform: translateX(var(--pa-dot-ext)); }
}

/* Яркость едет вместе с длиной: короткая пилюля приглушённая, длинная белая.
   Раньше приходящая росла полупрозрачной и в момент переключения скачком
   становилась белой. */
@keyframes pa-dot-dim {
  from { opacity: 1; }
  to { opacity: var(--pa-dot-fade); }
}

@keyframes pa-dot-lit {
  from { opacity: var(--pa-dot-fade); }
  to { opacity: 1; }
}

.pa-showcase-dot:focus-visible {
  outline: 2px solid var(--pa-focus);
  outline-offset: 3px;
}

/* Fallback: слайдов нет. Раскладку не переопределяем — текст встаёт в левый
   нижний угол теми же правилами, что и контент со слайдами; своё только
   ограничение ширины строки и слой над фоновым сиянием. */
.pa-showcase-fallback-text {
  position: relative;
  z-index: 1;
  max-width: 29.625rem;
  color: var(--pa-title-color);
}

@media (prefers-reduced-motion: reduce) {
  .pa-showcase-slide {
    transition: none;
    transform: none;
  }

  .pa-showcase-dot,
  .pa-showcase-dot::before,
  .pa-showcase-dot::after,
  .pa-showcase-dot-pill { transition: none; }

  /* Индикатор обратного отсчёта — тоже движение, и здесь его быть не должно.
     Автоплей при reduceMotion и так не стартует, но правило оставлено явным:
     оно страхует случай, когда класс is-autoplaying окажется на элементе по
     другой причине. */
  .pa-showcase.is-autoplaying .pa-showcase-dot,
  .pa-showcase.is-autoplaying .pa-showcase-dot::after,
  .pa-showcase.is-autoplaying .pa-showcase-dot-pill { animation: none; }

  .pa-showcase::after,
  .pa-showcase.is-pulse,
  .pa-showcase-bot-svg,
  .pa-showcase-bot-eyes,
  .pa-showcase-bot.is-reacting .pa-showcase-bot-chat,
  .pa-showcase-bot.is-approving .pa-showcase-bot-chat,
  .pa-showcase-bot.is-approving .pa-showcase-bot-head,
  .pa-showcase-bot.is-approving .pa-showcase-bot-check,
  .pa-showcase-bot-signal path,
  .pa-showcase-bot-typing { animation: none; }

  .pa-showcase-bot-pupil { transition: none; }
}

/* ============================================================
 * Мобильный лендинг (≤1023px): витрина разворачивается в список
 * ============================================================
 * На телефоне карусель проигрывает списку: листать на узком экране неудобно, а
 * все программы всё равно должны быть на виду до анкеты. Разворот делается
 * чистым CSS — неактивные слайды спрятаны opacity/visibility, а не display:
 * none, поэтому достаточно вернуть им видимость и вынуть трек из грида. Классы
 * is-active скрипт продолжает переставлять, но здесь они ни на что не влияют:
 * правила ниже (0,2,0) стоят позже одноимённых по специфичности и побеждают в
 * обе стороны — видимы все слайды всегда.
 * Блок намеренно последний в файле: у медиазапроса своей специфичности нет,
 * побеждает он только порядком. */
@media (max-width: 1023px) {
  /* justify-content: flex-end у витрины прижимал единственный трек к низу.
     В списке контент задаёт высоту сам, и при overflow: hidden прижатие к
     низу срезало бы верх списка, если высоту чем-то ограничат. */
  .registration-image.pa-showcase {
    justify-content: flex-start;
  }

  /* Из грида в поток: слайды перестают лежать друг на друге.
     view-transition-name снимается — переключать нечего, а именованный
     участник перехода на статичном блоке только мешает. */
  .pa-showcase .pa-showcase-track {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    view-transition-name: none;
  }

  /* (0,2,0) — ровно как у «.pa-showcase-slide.is-active», но позже в файле,
     поэтому видимость не зависит от того, какой слайд скрипт считает
     активным. */
  .pa-showcase .pa-showcase-slide {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  /* Волосяная линия между слайдами: без неё семь программ подряд читаются
     сплошным текстом, а не отдельными карточками. */
  .pa-showcase .pa-showcase-slide + .pa-showcase-slide {
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  /* Листать нечем — точки не нужны: на мобильном витрина развёрнута в
     вертикальный список, все слайды и так на экране. */
  .pa-showcase .pa-showcase-dots { display: none; }

  /* Кнопка призыва к действию. min-height 44px — минимальная комфортная цель
     для пальца. Именно px, а не rem: базовый шрифт страницы 14px, и 2.75rem
     дали бы 38.5px — замерено в браузере 13.08.
     Специфичность (0,3,0) — см. базовое правило выше: иначе ссылку слайда
     перекрасит и подчеркнёт «.pa-showcase .pa-showcase-slide a». */
  .pa-showcase .pa-showcase-slide .pa-showcase-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0.625rem 1.5rem;
    border-radius: var(--pa-radius-sm);
    background: var(--pa-marker-color);
    color: var(--pa-title-color);
    font-size: var(--pa-text-size);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
  }

  .pa-showcase .pa-showcase-slide .pa-showcase-cta:focus-visible {
    outline: 2px solid var(--pa-focus);
    outline-offset: 3px;
  }
}

/* End */
/* /local/components/zabotix/partner.registration.form/templates/unauth/style.css?1779987161880 */
/* /local/components/zabotix/partner.registration.form/templates/style.css?178784172845572 */
/* /local/components/zabotix/partner.affiliate.showcase/templates/.default/style.css?178784172850084 */