/* ========================================
   SPLIT FORM LAYOUT
   Универсальный split-layout для форм
   Использование: создание мероприятия, редактирование профиля, настройки и т.д.
   ======================================== */

/* Обёртка: форма плоско на фоне страницы (не в gc-panel).
   Холст main — --gc-app-content-bg (Surface/Page по умолчанию; primary — только где content-surface="primary"). */
.split-form-wrapper {
    background: transparent;
    padding: var(--space-6) 0 var(--space-12);
}

/*
 * Page chrome: sticky gc-three-col-subheader sibling before the form column
 * (event create/edit). Match event-show cluster gap; avoid double top padding.
 * Desktop only — subheader is display:none below 992.
 */
@media (min-width: 992px) {
    .gc-three-col-subheader + .split-form-wrapper {
        padding-top: var(--layout-three-col-subheader-gap);
    }
}

/* Контейнер для центрирования */
.split-form-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    height: 100%;
    min-height: calc(100vh - 60px - (var(--space-8) * 2));
}

@media (max-width: 576px) {
    .split-form-container {
        min-height: calc(100vh - 56px - (var(--space-4) * 2));
    }
}

/* Split Layout */
.split-form-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

/* Левая часть - скрыта по умолчанию */
.split-form-hero {
    display: none;
    position: relative;
}

/* Модификатор для отображения левой части с баннером */
.split-form-layout.split-form-with-banner {
    gap: var(--space-4);
}

.split-form-layout.split-form-with-banner .split-form-hero {
    display: flex;
    flex: 0 0 35%;
    min-width: 350px;
    max-width: 450px;
    background: transparent;
    padding: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    position: sticky;
    top: 0;
    align-self: flex-start;
}

/* Форма занимает оставшееся место при наличии баннера */
.split-form-layout.split-form-with-banner .split-form-content {
    flex: 1;
}

/* Контейнер для центрированной формы (без баннера) */
.split-form-container.split-form-centered {
    max-width: 660px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* catalog-header внутри split-form-centered не используется — margin убран */

/* ===============================================
   EVENT BANNER - Баннер мероприятия для заявки
   =============================================== */

.event-banner {
    height: auto;
    min-height: auto;
    border-radius: var(--radius-16);
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.event-banner-overlay {
    position: relative;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--fill-emphasis) 30%, transparent) 0%,
        color-mix(in srgb, var(--fill-emphasis) 70%, transparent) 100%
    );
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 400px;
}

.event-banner-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.event-banner-title {
    font-size: var(--font-size-22);
    font-weight: 700;
    color: var(--text-on-solid);
    margin: 0;
    text-shadow: 0 2px 8px color-mix(in srgb, var(--fill-emphasis) 30%, transparent);
}

.event-banner-meta {
    font-size: var(--font-size-14);
    color: var(--text-on-solid);
    line-height: 1.6;
}

.event-banner-blocks {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.event-banner-block {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: color-mix(in srgb, var(--text-on-solid) 10%, transparent);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-16);
    border: 1px solid color-mix(in srgb, var(--text-on-solid) 10%, transparent);
    transition-property: background-color, border-color;
    transition-duration: var(--transition-base);
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.event-banner-block.profile-trigger:hover {
    background: color-mix(in srgb, var(--text-on-solid) 15%, transparent);
    border-color: color-mix(in srgb, var(--text-on-solid) 20%, transparent);
}

.event-banner-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--text-on-solid) 20%, transparent);
    flex-shrink: 0;
}

.event-banner-avatar-placeholder {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-20);
    font-weight: 600;
    color: var(--text-on-solid);
}

.event-banner-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.event-banner-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-on-solid);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-banner-label {
    font-size: var(--font-size-14);
    color: color-mix(in srgb, var(--text-on-solid) 80%, transparent);
    margin: 0;
}

.event-banner-price {
    flex-direction: column;
    align-items: flex-start;
}

.event-banner-price-content {
    width: 100%;
}

.event-banner-price-label {
    font-size: var(--font-size-14);
    color: color-mix(in srgb, var(--text-on-solid) 80%, transparent);
    margin-bottom: var(--space-1);
}

.event-banner-price-amount {
    font-size: var(--font-size-18);
    font-weight: 600;
    color: var(--text-on-solid);
}


/* Форма по центру */
.split-form-content {
    width: 100%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Create/edit: одна белая панель + in-panel сабхедер (как show) */
.split-form-container.split-form-centered > .gc-panel.gc-show-main-panel {
    width: 100%;
    max-width: 100%;
}

.split-form-container.split-form-centered > .gc-panel.gc-show-main-panel > .split-form-content {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-4);
}

@media (min-width: 992px) {
    .split-form-container.split-form-centered > .gc-panel.gc-show-main-panel > .gc-show-main-subheader + .split-form-content {
        padding-top: var(--space-2);
    }
}

/* Join preview: одна колонка — карточка «О мероприятии» + форма (как mobile rail на event show).
   Горизонт — только .gc-app-main (--layout-content-inset-x / --layout-app-rail-main-inset-x).
   Не дублировать content-inset на контейнере (THREE_COL_LAYOUT flush-контракт).
   padding-top — у .split-form-wrapper / .gc-three-col-subheader + .split-form-wrapper. */
.join-preview-layout.split-form-wrapper {
    padding-inline: 0;
    padding-bottom: var(--space-12);
}

.join-preview-layout .join-preview-container {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding-inline: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-height: auto;
}

.join-preview-layout .join-preview-about {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    width: 100%;
}

/* Льготы — язычок из-под хиро, тот же overlap, что у футера about. */
.join-preview-hero-stack {
    display: flex;
    flex-direction: column;
    isolation: isolate;
    min-width: 0;
    width: 100%;
}

.join-preview-hero-stack > .event-show-hero-card {
    position: relative;
    z-index: 1;
    margin-bottom: calc(-1 * var(--space-4));
}

.join-preview-layout .join-preview-about .sidebar-content {
    gap: 0;
    max-width: none;
}

.join-preview-layout .join-preview-about .gc-inset-list.gc-inset-list--rail.sidebar-event-info-block,
.join-preview-layout .join-preview-about .sidebar-event-info-block {
    border: 1px solid var(--border-subtle);
    border-radius: var(--gc-corner-outer);
    background: var(--surface-secondary);
    overflow: hidden;
}

.join-preview-layout .join-preview-form {
    min-width: 0;
    width: 100%;
    margin-top: var(--space-2);
}

.join-preview-layout .join-preview-form .split-form-content {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    overflow: visible;
}

.join-preview-layout .split-form-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: 0;
}

.join-preview-layout .split-form-title {
    font-size: var(--font-size-20);
    font-weight: 600;
    line-height: var(--type-ui-title-line-height);
    color: var(--text-primary);
}

.join-preview-layout .split-form-description {
    font-size: var(--type-ui-caption-size);
    line-height: var(--type-ui-caption-line-height);
    color: var(--text-secondary);
}

.join-preview-layout .join-preview-form .split-form-scroll {
    padding: 0;
    --split-form-section-outer-gap: var(--space-6);
    --split-form-section-inner-gap: var(--space-2);
    --split-form-section-field-gap: var(--space-4);
}

.join-preview-layout .join-preview-form .split-form-section-content > .gc-form-success,
.join-preview-layout .join-preview-form .split-form-section-content > .gc-form-text {
    margin-top: 0;
    margin-bottom: 0;
}

/* Join: портал #squad-dropdown в body — анимация как у .gc-select-dropdown.show */
#squad-dropdown.join-squad-dropdown-portal {
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

@media (prefers-reduced-motion: reduce) {
    #squad-dropdown.join-squad-dropdown-portal {
        transition: none;
    }
}

@media (max-width: 991px) {
    .join-preview-layout.split-form-wrapper {
        padding: var(--space-2) 0 calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
    }

    .join-preview-layout .join-preview-container {
        gap: var(--space-4);
        padding-inline: 0;
        max-width: none;
        margin-inline: 0;
    }

    .join-preview-layout .split-form-header {
        display: flex;
    }

    .join-preview-layout .join-preview-form .split-form-scroll {
        padding: 0;
    }
}

/* Хедер формы - как modal-header */
.split-form-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    box-shadow: none;
    flex-shrink: 0;
}

.split-form-back-link {
    display: none;
}

/* Заголовок формы - как modal-title */
.split-form-title {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

/* Описание под заголовком - как modal description (shadcn: text-sm text-muted-foreground) */
.split-form-description,
.split-form-header p {
    font-size: var(--font-size-14);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Область формы - без скролла */
.split-form-scroll {
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 0;
    --split-form-section-inner-gap: var(--space-3);
    --split-form-section-lead-gap: var(--space-1);
    --split-form-section-field-gap: var(--space-4);
    --split-form-section-outer-gap: var(--space-8);
}

/* Форма внутри scroll — ритм секций (Gestalt: заголовок + контент плотно, секции дальше друг от друга) */
.split-form-scroll form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Секции формы — без «карточки»: заголовок (или header) + контент */
.split-form-section {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--split-form-section-inner-gap, var(--space-2));
}

/* Create/edit мероприятия: заголовок снаружи, карточка — только контент */
.split-form-wrapper--panel-sections .split-form-section-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.split-form-wrapper--panel-sections .split-form-section-group .split-form-section {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: var(--space-4);
    overflow: visible;
}

.split-form-wrapper--panel-sections .split-form-section-group + .split-form-section-group {
    margin-top: 0;
}

/* Между секциями: только воздух, без линии.
   form > … — live; scroll > … — VisitSkeleton / classic actions вне form. */
.split-form-scroll form > .split-form-section ~ .split-form-section:not(.gc-delete-section),
.split-form-scroll > .split-form-section ~ .split-form-section:not(.gc-delete-section) {
    margin-top: var(--split-form-section-outer-gap, var(--space-12));
    padding-top: 0;
    border-top: none;
}

/* Кнопки формы — отступ без разделителя */
.split-form-scroll form > .split-form-actions,
.split-form-scroll form > .split-form-footer,
.split-form-scroll > .split-form-actions,
.split-form-scroll > .split-form-footer {
    margin-top: var(--split-form-section-outer-gap, var(--space-12));
    padding-top: 0;
    border-top: none;
}

/* Карточка «опасной» зоны — отдельно от голых групп */
.split-form-scroll form > .split-form-section ~ .split-form-section.gc-delete-section {
    margin-top: var(--space-8);
    padding-top: 0;
    border-top: none;
}

.split-form-section.gc-delete-section {
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--surface-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-16);
}

/* Профиль → приватность: тоггл + fieldset с радио (без рамки fieldset по умолчанию) */
.profile-privacy-sections {
    gap: var(--space-4);
}

.profile-privacy-section fieldset.profile-privacy-section__visibility {
    border: none;
    margin: 0;
    min-width: 0;
    padding: 0;
}

/* Модификатор: горизонтальный субхедер (← заголовок …) */
.split-form-section-row {
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: var(--space-2);
}

.split-form-section-row .gc-back-link {
    margin-bottom: 0;
    flex-shrink: 0;
}

.split-form-section-row .split-form-section-row-title {
    flex: 1;
    text-align: center;
    font-size: var(--font-size-20);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.split-form-section-row .split-form-section-row-actions {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   gc-subheader — десктопный сабхедер страницы
   Два варианта × два стиля
   ═══════════════════════════════════════════════════════

   Структура:
     .gc-subheader[.gc-subheader--spread][.gc-subheader--toolbar|.gc-subheader--in-panel]
       .gc-back-link[.gc-back-link--sm] — «назад» (split-form toolbar = тот же sm, 28px)
       h2.gc-subheader-title  — заголовок
       .gc-subheader-actions  — правая зона (только в --spread)
*/

/* ── Базовые стили (общие для обоих вариантов) ───────── */
.gc-subheader {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
}

/* gc-back-link имеет margin-bottom в обычном контексте — сбрасываем внутри сабхедера */
.gc-subheader .gc-back-link,
.gc-subheader .gc-btn {
    margin-bottom: 0;
    flex-shrink: 0;
}

/* better-ui: press + named transitions on in-panel / toolbar back (не .gc-btn) */
.gc-subheader .gc-back-link {
    transition-property: transform, background-color, color, border-color;
    transition-duration: var(--transition-fast);
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.gc-subheader .gc-back-link:active {
    transform: scale(0.96);
}

/* Optical caret in compact / icon-only back inside subheader */
.gc-subheader .gc-back-link i.ph-caret-left {
    transform: translateX(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .gc-subheader .gc-back-link {
        transition-property: background-color, color, border-color;
    }

    .gc-subheader .gc-back-link:active {
        transform: none;
    }

    .gc-subheader .gc-back-link i.ph-caret-left {
        transform: translateX(-1px);
    }
}

/* Keyboard focus — тот же паттерн, что page chrome (.gc-three-col-subheader) */
.gc-subheader .gc-btn:focus:not(:focus-visible),
.gc-subheader .gc-back-link:focus:not(:focus-visible) {
    outline: none;
}

html .gc-subheader .gc-btn:focus-visible,
html .gc-subheader .gc-back-link:focus-visible,
html:not([data-gc-control-glow='off']) .gc-subheader .gc-dropdown > .gc-btn.gc-dropdown-toggle.gc-card-glow-shell--control:focus-visible,
html .gc-subheader .gc-dropdown > .gc-btn.gc-btn-bordered.gc-dropdown-toggle:not(.gc-btn-icon):not(.gc-btn-icon-sm):not(.gc-btn-icon-xs):focus-visible,
html .gc-subheader .gc-dropdown > .gc-btn.gc-btn-bordered.gc-dropdown-toggle:is(.gc-btn-icon, .gc-btn-icon-sm, .gc-btn-icon-xs):focus-visible {
    outline: var(--gc-focus-outline);
    outline-offset: 2px;
}

html .gc-subheader .gc-btn:focus-visible,
html:not([data-gc-control-glow='off']) .gc-subheader .gc-btn.gc-card-glow-shell--control:focus-visible,
html .gc-subheader .gc-dropdown > .gc-btn.gc-btn-bordered.gc-dropdown-toggle:not(.gc-btn-icon):not(.gc-btn-icon-sm):not(.gc-btn-icon-xs):focus-visible,
html .gc-subheader .gc-dropdown > .gc-btn.gc-btn-bordered.gc-dropdown-toggle:is(.gc-btn-icon, .gc-btn-icon-sm, .gc-btn-icon-xs):focus-visible {
    box-shadow: var(--gc-btn-hairline), var(--gc-btn-elevation);
}

.gc-subheader-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Вариант 1: inline — заголовок абсолютно по центру контейнера ─────── */
.gc-subheader:not(.gc-subheader--spread) {
    position: relative;
}

.gc-subheader:not(.gc-subheader--spread) .gc-subheader-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: 60%;
}

/* ── Вариант 2: spread — заголовок занимает flex-пространство по центру ── */
.gc-subheader--spread .gc-subheader-title {
    flex: 1;
    text-align: center;
}

.gc-subheader-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    /* Минимальная ширина = ширина gc-back-link для симметрии */
    min-width: 80px;
    justify-content: flex-end;
}

/* Правая колонка без меню — резерв под ширину «назад» (симметрия spread) */
.gc-subheader .gc-subheader-spacer {
    flex-shrink: 0;
    min-width: 5rem;
    width: 5rem;
}

/* ── Стиль: toolbar — полоса как в Figma split-form: скругление lg, бордер, зазор 10px */
/* gc-subheader--card — устаревший алиас, те же правила */
/* Concentric: pad space/4 + inner pill/full → outer ≥ radius-16 (Figma card shell). */
.gc-subheader--toolbar,
.gc-subheader--card {
    background: var(--surface-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-16);
    padding: var(--space-4);
    gap: var(--space-2);
    overflow: clip;
    box-sizing: border-box;
}

.gc-subheader--toolbar .gc-subheader-title,
.gc-subheader--card .gc-subheader-title {
    font-size: var(--font-size-15);
    font-weight: 500;
    line-height: var(--line-height-list-title);
    margin: 0;
}

/*
 * Стиль: in-panel — первая строка внутри gc-panel (каталог / брифинг).
 * Без второго слоя border/bg: панель уже даёт каркас. Паддинги как у соседнего контента.
 * Заголовок может переноситься (не одна строка с ellipsis как у «голого» spread).
 */
.gc-subheader.gc-subheader--in-panel {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: var(--space-4) var(--space-4) var(--space-2);
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

.gc-subheader.gc-subheader--in-panel .gc-subheader-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    min-width: 0;
}

.gc-subheader.gc-subheader--in-panel.gc-subheader--spread .gc-subheader-title {
    text-align: center;
}

.gc-subheader--sticky {
    position: sticky;
    top: 70px;
    z-index: var(--z-sticky);
}

/* ── Стиль: bare — без всего (по умолчанию) ──────────── */
/* Просто не добавлять --card */

/* ═══════════════════════════════════════════════════════ */

/* Заголовок секции — выше полевых .gc-form-label (15px/600 primary vs 13px/500 secondary) */
.split-form-section-title {
    font-size: var(--font-size-15);
    line-height: var(--line-height-list-title);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin: 0;
}

/* Заголовок + lead (описание секции) — одна группа */
.split-form-section-header,
.split-form-section-intro {
    display: flex;
    flex-direction: column;
    gap: var(--split-form-section-lead-gap);
}

.split-form-section-header .gc-form-description,
.split-form-section-intro .gc-form-description {
    margin: 0;
    font-size: var(--type-ui-caption-size);
    line-height: var(--type-ui-caption-line-height);
    color: var(--text-secondary);
}

/* Медиа-секции (профиль / канал): плотнее шаг между элементами контента */
.split-form-section--profile-cover .split-form-section-content {
    gap: var(--split-form-section-inner-gap);
}

/* Контент секции — шаг между полями */
.split-form-section-content {
    display: flex;
    flex-direction: column;
    gap: var(--split-form-section-field-gap, var(--space-4));
}

/* Подсказка к строке полей относится к ней, а не к следующему полю. */
.split-form-section-content > .gc-form-row + .gc-form-description {
    margin-top: calc(var(--space-2) - var(--split-form-section-field-gap, var(--space-4)));
}

/* Оболочки секции (список оружия/сквада) — тот же outer, что у .gc-toggle-group, не compact list 12 */
.split-form-section-content > .gc-list-group {
    --gc-list-group-radius: var(--gc-corner-outer);
}

/* Плотнее вертикальный стек внутри split-form */
.split-form-section .gc-stack {
    gap: var(--space-4);
}

/* Label → control: 6px (Figma sm) */
.split-form-section .gc-form-group {
    margin-bottom: 0;
    gap: var(--space-1-5);
}

/* Обнуляем margin у всех элементов внутри gc-stack */
.gc-stack > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Обнуляем margin у всех элементов внутри header */
.split-form-header * {
    margin: 0;
}

/* Фиксим отступы только для standalone-чекбоксов в gc-stack.
   В list-item варианте padding задаётся UI Kit (`.gc-list-item`). */
.gc-stack .gc-checkbox-wrapper:not(.gc-list-item) {
    gap: var(--space-2);
    padding: 0; /* Убираем padding для чекбоксов в gc-stack */
}

/* Native input полностью скрыт */
.gc-stack .gc-checkbox-native,
.gc-stack input.gc-checkbox {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: none !important;
    pointer-events: none !important;
}

/* Блок цены в форме события — две колонки + вертикальный разделитель (макет Figma) */
.gc-event-price-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.gc-event-price-layout__divider {
    display: none;
    width: 1px;
    align-self: stretch;
    flex-shrink: 0;
    background: var(--border-subtle);
}

/* Равные половины: при диапазоне левая колонка (тип цены) не сжимается */
.gc-event-price-layout__col {
    flex: 1 1 0;
    min-width: 0;
}

@media (min-width: 576px) {
    .gc-event-price-layout {
        flex-direction: row;
        align-items: flex-end;
        gap: var(--space-4);
    }

    .gc-event-price-layout__divider {
        display: block;
    }

    .gc-event-price-layout:has(#priceAmountCol.gc-hidden) .gc-event-price-layout__divider,
    .gc-event-price-layout:not(:has(#priceAmountCol)) .gc-event-price-layout__divider {
        display: none;
    }
}

.gc-event-price-range-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.gc-event-price-range-row .gc-form-group,
.gc-event-price-range-row .gc-input {
    flex: 1 1 0;
    min-width: 0;
}

.gc-event-price-sep {
    flex-shrink: 0;
    font-size: var(--font-size-14);
    color: var(--text-secondary);
}

/* Ряд кнопок под полями формы (в потоке документа; отступы — gap у split-form-scroll / form).
   Целевое действие — справа; кнопки по ширине контента (не на всю строку). */
.split-form-actions,
.split-form-footer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin: 0;
    box-shadow: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    width: 100%;
}

/* Кнопки в footer — как в modal-footer */
.split-form-actions .gc-btn,
.split-form-footer .gc-btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-15);
    flex: 0 0 auto;
    margin: 0;
}

/* Раскладка «кнопки на всю ширину ряда» (редко; фильтры, моб. модалки) */
.split-form-actions.split-form-actions--stretch {
    justify-content: stretch;
}

.split-form-actions.split-form-actions--stretch .gc-btn {
    flex: 1;
}

/* Явный модификатор «вправо» — эквивалент дефолта, оставлен для совместимости */
.split-form-actions.split-form-actions--end {
    justify-content: flex-end;
    width: 100%;
    flex-wrap: wrap;
}

.split-form-actions.split-form-actions--end .gc-btn {
    flex: 0 0 auto;
}

.split-form-actions.split-form-actions--end form {
    display: contents;
}

/* Слева опасное действие, справа основное (напр. удалить + сохранить) */
.split-form-actions.split-form-actions--between {
    justify-content: space-between;
    align-items: center;
}

.split-form-actions.split-form-actions--between form {
    display: inline-block;
    margin: 0;
}

.split-form-actions__trail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-left: auto;
}

/* ===============================================
   FORM DIVIDER - Разделитель "или"
   =============================================== */

.form-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: var(--space-4) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-14);
}

.form-divider::before,
.form-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-subtle);
}

.form-divider span {
    padding: 0 var(--space-4);
    font-weight: 500;
    text-transform: lowercase;
}

/* ===============================================
   TELEGRAM & PHONE SECTIONS
   =============================================== */

.telegram-connect-section {
    margin-bottom: var(--space-2);
}

/* Подключённый Telegram — тот же паттерн, что в form-page.css (split-form / профиль) */
.telegram-connected {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--surface-control);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-16);
}

.telegram-connected-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
}

.telegram-connected-info i {
    font-size: var(--font-size-18);
    color: var(--brand-telegram);
}

.telegram-username {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.telegram-username:hover {
    color: var(--accent-link);
}

.phone-input-section {
    margin-top: var(--space-4);
}

/* Read-only input — наследует .gc-input[readonly]; локальный модификатор для split-form */
.gc-input-readonly {
    background-color: var(--gc-input-bg);
    border-color: var(--gc-input-border);
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 1;
}

/* Текст заглушек и подписей в секциях формы */
.split-form-section .gc-form-text {
    font-size: var(--font-size-14);
    color: var(--text-secondary);
}

@media (max-width: 991px) {
    /* Wrapper: воздух до глобального футера + safe-area (home indicator) */
    .split-form-wrapper {
        padding: var(--space-6) 0 calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
    }
    
    .split-form-container {
        min-height: auto;
        padding: 0 var(--space-4);
    }
    
    .split-form-layout {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .split-form-hero {
        flex: 0 0 auto;
        min-width: auto;
        max-width: none;
        min-height: 200px;
        position: static !important; /* Убираем sticky на мобильных */
        top: auto !important;
        width: 100%; /* На всю ширину */
        align-self: auto;
    }
    
    .split-form-content {
        max-width: none;
        gap: var(--space-2);
    }
    
    /* Header скрыт на мобильных */
    .split-form-header {
        display: none;
    }
    
    .split-form-content {
        gap: 0;
    }
    
    .split-form-scroll {
        margin: 0;
        padding: var(--space-2);
        border-radius: 0;
        border: none;
    }
    
    .split-form-scroll form {
        gap: 0;
    }
    
    .split-form-section {
        padding: 0;
    }

    .split-form-scroll form > .split-form-section ~ .split-form-section:not(.gc-delete-section),
    .split-form-scroll > .split-form-section ~ .split-form-section:not(.gc-delete-section) {
        margin-top: var(--split-form-section-outer-gap, var(--space-12));
        padding-top: 0;
        border-top: none;
    }

    .split-form-scroll form > .split-form-actions,
    .split-form-scroll form > .split-form-footer,
    .split-form-scroll > .split-form-actions,
    .split-form-scroll > .split-form-footer {
        margin-top: var(--split-form-section-outer-gap, var(--space-12));
        padding-top: 0;
    }
}

/* Маленькие экраны */
@media (max-width: 576px) {
    .split-form-wrapper {
        padding: var(--space-2) 0 calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
    }
    
    .split-form-container {
        padding: 0 var(--space-2);
    }
    
    .split-form-layout {
        border-radius: 0;
        box-shadow: none;
    }
    
    .split-form-content {
        border-radius: 0;
        /* border-left: none;
        border-right: none; */
        gap: 0;
    }
    
    .split-form-hero {
        min-height: auto;
        width: 100%; /* На всю ширину на маленьких экранах */
        margin: 0; /* Убираем отступы */
    }
    
    .event-banner {
        min-height: 200px;
        border-radius: var(--radius-16); /* Убираем скругление на маленьких экранах */
    }
    
    .split-form-scroll {
        margin: 0;
        padding: 0;
        border-radius: 0;
        border: none;
    }
    
    .split-form-scroll form {
        padding: 0;
        gap: 0;
    }
    
    .split-form-section {
        padding: 0;
    }

    .split-form-scroll form > .split-form-section ~ .split-form-section:not(.gc-delete-section),
    .split-form-scroll > .split-form-section ~ .split-form-section:not(.gc-delete-section) {
        margin-top: var(--split-form-section-outer-gap, var(--space-12));
        padding-top: 0;
        border-top: none;
    }

    .split-form-scroll form > .split-form-actions,
    .split-form-scroll form > .split-form-footer,
    .split-form-scroll > .split-form-actions,
    .split-form-scroll > .split-form-footer {
        margin-top: var(--split-form-section-outer-gap, var(--space-12));
        padding-top: 0;
    }
}

/* Стили для списка оружия */
.weapon-list-content .weapon-list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    line-height: 1.5;
}

.weapon-list-content .weapon-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weapon-list-content .gc-badge {
    flex-shrink: 0;
    align-self: center;
}

/* Диапазон цен */
.gc-price-range-fields {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.gc-price-range-fields.gc-hidden {
    display: none !important;
}

/* Десктопный subheader для форм редактирования */
.gc-desktop-subheader {
    background: var(--surface-panel);
    padding: var(--space-4);
    border-radius: var(--radius-16);
}

.gc-desktop-subheader-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-14);
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: var(--space-1);
    transition-property: color;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.gc-desktop-subheader-back:hover {
    color: var(--text-primary);
}

.gc-desktop-subheader-back i {
    font-size: 1rem;
}

.gc-desktop-subheader-title {
    font-size: var(--font-size-20);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* .gc-required — form-controls.css */

.gc-form-help {
    font-size: var(--font-size-13);
    color: var(--text-secondary);
    margin-top: var(--space-1);
    margin-bottom: 0;
}

.gc-input-with-prefix {
    padding-left: var(--gc-input-icon-inset);
}

.gc-input-prefix-wrapper {
    position: relative;
}

.gc-form-actions {
    display: flex;
    gap: var(--space-2);
}

/* Префикс для input (например, @ для slug) */
.input-group-prefix {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    z-index: 10;
    pointer-events: none;
}

.gc-delete-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-14);
    line-height: 1.5;
}

.gc-delete-section .gc-btn-danger {
    align-self: flex-start;
}

/* Модал выбора классов оружия (create/edit event) */
.weapon-class-selector-item {
    cursor: pointer;
}

.weapon-class-checkbox {
    display: none;
}

.weapon-class-checkbox:checked ~ .weapon-class-badge-selector {
    background-color: var(--accent-link);
    color: var(--text-on-solid);
}

#weaponClassesModal .gc-tab-pane {
    display: none;
}

#weaponClassesModal .gc-tab-pane.active {
    display: block;
}

#weaponClassesModal .modal-body {
    scrollbar-gutter: stable;
}
