/* =============================================================================
   Форма заявки участника — страница /register и попап главной.

   Поля наследуют оформление формы обратной связи (.tj-contact-form из
   home-2026.css): те же тёмные поверхности, стрелка списка, кольцо фокуса.
   Здесь только то, чего у формы вопроса нет: смысловые блоки, сетка
   в две колонки, карточки пакетов, код телефона и согласие.
   ========================================================================== */

/* --- Страница ------------------------------------------------------------- */

.register-page {
   /* Шапка сайта лежит поверх страницы — отступ под неё. */
   padding: clamp(140px, 8rem + 4vw, 200px) 0 var(--space-section);
}

.register-page__inner {
   max-width: 860px;
   margin: 0 auto;
}

.register-page__header { margin-bottom: 40px; text-align: center; }

.register-page__title {
   margin: 0 0 12px;
   font-size: var(--fs-display);
   font-weight: 600;
   line-height: 1.05;
   letter-spacing: -0.03em;
   color: var(--c-text);
}

.register-page__lead {
   margin: 0;
   font-size: var(--fs-lead);
   line-height: 1.5;
   color: var(--c-text-2);
}

.reg-form-wrap {
   padding: clamp(20px, 0.75rem + 3vw, 48px);
   border-radius: var(--r-xl);
   background: var(--c-surface);
   box-shadow: inset 0 0 0 1px var(--c-hairline);
}

/* --- Блоки и сетка -------------------------------------------------------- */

.reg-form__section {
   min-width: 0;
   margin: 0 0 32px;
   padding: 0;
   border: 0;
}

/* Разделитель — фоном, а не border-top: рамку fieldset браузер разрывает
   под legend, и заголовок блока вставал прямо в линию. */
.reg-form__section + .reg-form__section {
   padding-top: 32px;
   background: linear-gradient(var(--c-hairline), var(--c-hairline)) top / 100% 1px no-repeat;
}

/* Блок, все поля которого скрыты веткой, не оставляет пустой рамки. */
.reg-form__section:not(:has(.reg-field:not([hidden]))) { display: none; }

/* float выводит legend из особого режима «в рамке fieldset»: иначе он
   встаёт на верхний край блока, поверх разделителя и мимо отступа. */
.reg-form__legend {
   float: left;
   width: 100%;
   margin: 0 0 20px;
   padding: 0;
   font-size: 0.8125rem;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--c-accent);
}

.reg-form__grid {
   clear: both;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0 20px;
}

.reg-field { min-width: 0; }
.reg-field--wide { grid-column: 1 / -1; }
.reg-field[hidden] { display: none; }

.tj-contact-form .reg-field.form_group { margin-bottom: 20px; }

@media (max-width: 575.98px) {
   .reg-form__grid { grid-template-columns: minmax(0, 1fr); }
}

.reg-field__req { margin-left: 4px; color: var(--c-accent); }

.reg-field__help {
   margin: 8px 0 0;
   font-size: var(--fs-small);
   line-height: 1.5;
   color: var(--c-text-2);
}

.reg-choices .reg-field__help { margin: -4px 0 16px; }

.reg-choices {
   min-width: 0;
   margin: 0;
   padding: 0;
   border: 0;
}

.reg-choices legend { float: none; width: auto; padding: 0; }

/* Высота полей как у формы вопроса — 52px, выше минимума 44px. */
.tj-contact-form .reg-field input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]) {
   min-height: 52px;
   border-radius: var(--r-sm);
   font-size: var(--fs-body);
}

.tj-contact-form .reg-field textarea { border-radius: var(--r-sm); font-size: var(--fs-body); }

/* --- Телефон: код страны + номер ------------------------------------------ */

.reg-phone {
   display: grid;
   grid-template-columns: minmax(96px, 120px) minmax(0, 1fr);
   gap: 8px;
}

/* --- Партнёрские пакеты ----------------------------------------------------- */

.package-cards {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
   gap: 12px;
}

.package-card {
   position: relative;
   display: flex;
   margin: 0;
   cursor: pointer;
}

/* Переключатель виден, а не спрятан: выбор должен читаться и без цвета. */
.package-card input {
   position: absolute;
   top: 18px;
   left: 18px;
   width: 20px;
   height: 20px;
   margin: 0;
   accent-color: var(--c-accent-fill);
}

.package-card__body {
   display: flex;
   flex-direction: column;
   gap: 10px;
   width: 100%;
   padding: 16px 18px 18px 50px;
   border-radius: var(--r-md);
   background: var(--c-surface);
   box-shadow: inset 0 0 0 1px var(--c-hairline-strong);
   transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.package-card:hover .package-card__body { background: var(--c-surface-2); }

.package-card input:checked + .package-card__body {
   background: rgba(59, 163, 245, 0.12);
   box-shadow: inset 0 0 0 2px var(--c-accent);
}

.package-card input:focus-visible + .package-card__body {
   outline: 3px solid var(--c-focus);
   outline-offset: 2px;
}

.package-card__title {
   font-size: var(--fs-body);
   font-weight: 600;
   line-height: 1.3;
   color: var(--c-text);
}

.package-card__features {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.package-card__feature {
   position: relative;
   padding-left: 14px;
   font-size: var(--fs-small);
   line-height: 1.45;
   color: var(--c-text-2);
}

.package-card__feature::before {
   content: "";
   position: absolute;
   top: 0.6em;
   left: 0;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--c-accent);
}

.reg-field__more {
   display: inline-flex;
   align-items: center;
   min-height: 44px;
   margin-top: 8px;
   color: var(--c-accent);
   font-size: var(--fs-small);
   font-weight: 600;
}

/* --- Свои поля: выбор одного --------------------------------------------- */

.reg-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.reg-pill {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   min-height: 44px;
   margin: 0;
   padding: 0 16px;
   border-radius: 999px;
   box-shadow: inset 0 0 0 1px var(--c-hairline-strong);
   color: var(--c-text);
   cursor: pointer;
}

.reg-pill input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-accent-fill); }
.reg-pill:has(input:checked) { background: rgba(59, 163, 245, 0.12); box-shadow: inset 0 0 0 2px var(--c-accent); }

/* --- Галочки: согласие и свои поля --------------------------------------- */

.reg-check {
   display: flex;
   align-items: flex-start;
   gap: 12px;
}

/* Сам квадрат 22px, а цель — вся строка вместе с подписью. */
.reg-check input {
   flex: none;
   width: 22px;
   height: 22px;
   margin: 2px 0 0;
   accent-color: var(--c-accent-fill);
}

.reg-check label {
   margin: 0;
   font-size: var(--fs-small);
   line-height: 1.55;
   color: var(--c-text-2);
   cursor: pointer;
}

.reg-check label a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }

/* --- Регион: список и свой текст ----------------------------------------- */

.reg-region { position: relative; }

/* Фон непрозрачный: --c-surface — полупрозрачная заливка для карточек,
   и сквозь список читались поля под ним. */
.reg-region__list {
   position: absolute;
   z-index: 20;
   top: calc(100% + 4px);
   left: 0;
   right: 0;
   max-height: 240px;
   margin: 0;
   padding: 4px 0;
   overflow: auto;
   list-style: none;
   border-radius: var(--r-sm);
   background: #1a1024;
   box-shadow: inset 0 0 0 1px var(--c-hairline-strong), 0 16px 40px rgba(0, 0, 0, 0.55);
}

.reg-region__list[hidden] { display: none; }

.reg-region__option {
   padding: 10px 14px;
   color: var(--c-text);
   cursor: pointer;
}

.reg-region__option[hidden] { display: none; }
.reg-region__option.is-active,
.reg-region__option:hover { background: rgba(59, 163, 245, 0.12); }

/* --- Направления: не больше двух ----------------------------------------- */

.reg-tracks { display: flex; flex-direction: column; gap: 8px; }

/* --- Фотография ----------------------------------------------------------- */

.reg-file {
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px 16px;
}

/* Системную кнопку «Выберите файл» прячем: её рисует браузер и она
   не совпадает с остальной формой. Открывает диалог подпись-кнопка. */
.tj-contact-form .reg-field .reg-file__input {
   position: absolute;
   width: 1px;
   height: 1px;
   min-height: 0;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.reg-file__btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 52px;
   margin: 0;
   padding: 0 28px;
   border: 1px solid var(--c-hairline-strong);
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.06);
   color: var(--c-text);
   font-size: var(--fs-body);
   font-weight: 600;
   letter-spacing: -0.01em;
   cursor: pointer;
}

.reg-file__btn:hover { background: rgba(255, 255, 255, 0.12); }

.reg-file__input:focus-visible + .reg-file__btn {
   outline: 2px solid var(--c-accent);
   outline-offset: 3px;
}

.reg-file__input:disabled + .reg-file__btn {
   border-color: var(--c-hairline);
   color: var(--c-text-2);
   cursor: not-allowed;
}

.reg-file__name {
   min-width: 0;
   max-width: 100%;
   overflow: hidden;
   color: var(--c-text-2);
   font-size: var(--fs-small);
   text-overflow: ellipsis;
   white-space: nowrap;
}

.reg-photo { margin-top: 12px; }
.reg-photo[hidden] { display: none; }

.reg-photo__preview {
   display: block;
   width: 160px;
   height: 213px;
   object-fit: cover;
   border-radius: var(--r-sm);
   background: #fff;
}

.reg-photo__status { margin: 8px 0 0; font-size: var(--fs-small); }
.reg-photo__status.is-ok { color: #1f8f4e; }

.reg-photo__report {
   margin: 8px 0 0;
   padding: 0;
   list-style: none;
   font-size: var(--fs-small);
   line-height: 1.45;
   color: var(--c-text-2);
}

.reg-photo__report .is-error { color: #c43737; }

/* --- Капча, кнопка, сообщения -------------------------------------------- */

.reg-form__captcha-widget:empty { display: none; }

.reg-form__actions { display: flex; }
.reg-form__actions .hero-btn { min-width: 220px; }
.reg-form__actions .hero-btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }

@media (max-width: 575.98px) {
   .reg-form__actions .hero-btn { width: 100%; }
}

.reg-form__alert,
.reg-form__status {
   margin: 0 0 24px;
   padding: 16px 20px;
   border-radius: var(--r-md);
   background: rgba(255, 107, 107, 0.1);
   box-shadow: inset 0 0 0 1px rgba(255, 138, 138, 0.4);
   color: var(--c-text);
}

.reg-form__status[hidden] { display: none; }

.reg-form__success,
.reg-form__closed {
   padding: clamp(24px, 1rem + 3vw, 48px);
   border-radius: var(--r-xl);
   background: rgba(52, 199, 89, 0.1);
   box-shadow: inset 0 0 0 1px rgba(52, 199, 89, 0.35);
   color: var(--c-text);
   font-size: var(--fs-lead);
   line-height: 1.55;
   text-align: center;
}

.reg-form__closed { background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-hairline); }
.reg-form__success p,
.reg-form__closed p { margin: 0 0 24px; }
.reg-form__success p:last-child { margin-bottom: 0; }
.reg-form__success:focus { outline: none; }

/* --- Попап на главной ------------------------------------------------------ */

.mfp-content .registration-popup { max-width: 860px; }

.registration-popup__inner { padding: clamp(24px, 1rem + 3vw, 48px); }

.registration-popup__header { margin-bottom: 28px; padding-right: 56px; }

.registration-popup__title {
   margin: 0 0 8px;
   font-size: var(--fs-title);
   font-weight: 600;
   line-height: 1.1;
   letter-spacing: -0.02em;
   color: var(--c-text);
}

.registration-popup__lead { margin: 0; font-size: var(--fs-body); color: var(--c-text-2); }

/* Внутри попапа своя подложка уже есть — вторая рамка лишняя. */
.registration-popup .reg-form-wrap { padding: 0; background: none; box-shadow: none; }

@media (max-width: 767.98px) {
   .registration-popup__inner { padding: 24px 16px; }
}