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

/* Основной контейнер (fixed, fullscreen) */
/* Снизу больше воздуха — до глобального футера страницы (после отказа от fixed-кнопок) */
.split-form-wrapper {
    background: var(--bg-primary);
    padding: var(--spacing-lg) 0 var(--spacing-2xl);
}

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

@media (max-width: 576px) {
    .split-form-container {
        min-height: calc(100vh - 56px - (var(--spacing-md) * 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(--spacing-md);
}

.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(--spacing-lg);
}

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

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

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

.event-banner-overlay {
    position: relative;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.7) 100%
    );
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 400px;
}

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

.event-banner-title {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.event-banner-meta {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
}

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

.event-banner-block {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all var(--transition-base);
}

.event-banner-block.profile-trigger:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.event-banner-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
    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-xl);
    font-weight: 600;
    color: white;
}

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

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

.event-banner-label {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
    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-sm);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-xs);
}

.event-banner-price-amount {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #ffffff;
}


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

/* Join preview: центрируем весь блок (sidebar + form), без искусственного разрыва между колонками */
.join-preview-layout .split-layout {
    grid-template-columns: 360px 1fr;
    max-width: 1068px; /* 360 + 8(gap) + 700 */
}

.join-preview-layout .split-right .split-form-content {
    margin-inline: 0;
    overflow: visible; /* squad dropdown должен быть виден вне контейнера */
}

/* 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-layout {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: var(--spacing-sm);
    }

    .join-preview-layout .split-left {
        display: block;
        grid-column: 1;
    }

    .join-preview-layout .split-right {
        grid-column: 1;
    }

    .join-preview-layout .split-left .sidebar-avatar {
        width: 36px;
        height: 36px;
    }

    .join-preview-layout .split-left .sidebar-name {
        font-size: var(--font-size-sm);
    }
}

/* Хедер формы - как 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(--spacing-xs);
    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-md);
    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-sm);
    color: var(--font-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-md);
    line-height: 1.6;
    color: var(--font-primary);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Форма внутри scroll — крупный шаг между группами (макет: ~32px) */
.split-form-scroll form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

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

/* Разделитель между соседними группами (первая секция без линии сверху) */
.split-form-section + .split-form-section:not(.gc-delete-section) {
    margin-top: 0;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-tertiary);
}

/* Редактирование профиля: без линии и без лишнего padding-top — интервал даёт gap у формы */
.split-form-section--profile-cover + .split-form-section:not(.gc-delete-section) {
    border-top: none;
    padding-top: 0;
}

/* Редактирование оружия: после блока фото без разделителя — интервал даёт gap у формы */
.split-form-section--weapon-photos + .split-form-section:not(.gc-delete-section) {
    border-top: none;
    padding-top: 0;
}

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

.split-form-section.gc-delete-section {
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-content-main);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
}

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

.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(--spacing-sm);
}

.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-xl);
    font-weight: 700;
    color: var(--font-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(--spacing-md);
    width: 100%;
}

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

.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(--spacing-sm);
    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 — устаревший алиас, те же правила */
.gc-subheader--toolbar,
.gc-subheader--card {
    background: var(--bg-content-main);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    gap: var(--spacing-2sm);
    overflow: clip;
    box-sizing: border-box;
}

.gc-subheader--toolbar .gc-subheader-title,
.gc-subheader--card .gc-subheader-title {
    font-size: var(--font-size-mdl);
    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(--spacing-mdl) var(--spacing-mdl) var(--spacing-sm);
    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 */

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

/* Заголовок группы — вторичный акцент (макет: 14px medium) */
.split-form-section-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--font-secondary);
    margin: 0;
}

/* Первый блок медиа (профиль / канал): заголовок секции как у UI Kit — основной текст, крупнее соседних групп */
.split-form-section--profile-cover .split-form-section-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--font-primary);
    letter-spacing: -0.01em;
}

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

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

/* Label → control: 6px (макет) */
.split-form-section .gc-form-group {
    margin-bottom: 0;
    gap: var(--spacing-3xs);
}

/* Обнуляем 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(--spacing-sm);
    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(--spacing-mdl);
}

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

/* Равные половины: при диапазоне левая колонка (тип цены) не сжимается */
.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: stretch;
        gap: var(--spacing-mdl);
    }

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

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

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

.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-sm);
    color: var(--font-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(--spacing-sm);
    width: 100%;
}

/* Кнопки в footer — как в modal-footer */
.split-form-actions .gc-btn,
.split-form-footer .gc-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-mdl);
    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;
}

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

.form-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: var(--spacing-md) 0;
    color: var(--font-secondary);
    font-size: var(--font-size-sm);
}

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

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

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

.telegram-connect-section {
    margin-bottom: var(--spacing-sm);
}

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

.telegram-connected-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--font-secondary);
}

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

.telegram-username {
    color: var(--font-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(--spacing-md);
}

/* Read-only input стиль */
.gc-input-readonly {
    /* Keep consistent with UI Kit disabled/readonly controls */
    background-color: var(--ui-control-bg);
    border-color: var(--ui-border);
    color: var(--font-secondary);
    cursor: not-allowed;
    opacity: 1;
}

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

@media (max-width: 991px) {
    /* Wrapper: воздух до глобального футера + safe-area (home indicator) */
    .split-form-wrapper {
        padding: var(--spacing-lg) 0 calc(var(--spacing-2xl) + env(safe-area-inset-bottom, 0px));
    }
    
    .split-form-container {
        min-height: auto;
        padding: 0 var(--spacing-md);
    }
    
    .split-form-layout {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .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(--spacing-sm);
    }
    
    /* Header скрыт на мобильных */
    .split-form-header {
        display: none;
    }
    
    .split-form-content {
        gap: 0;
    }
    
    .split-form-scroll {
        margin: 0;
        padding: var(--spacing-sm);
        border-radius: 0;
        border: none;
    }
    
    .split-form-scroll form {
        gap: var(--spacing-lg);
    }
    
    .split-form-section {
        padding: 0;
    }

    .split-form-section + .split-form-section {
        padding-top: var(--spacing-lg);
    }
}

/* Маленькие экраны */
@media (max-width: 576px) {
    .split-form-wrapper {
        padding: var(--spacing-sm) 0 calc(var(--spacing-2xl) + env(safe-area-inset-bottom, 0px));
    }
    
    .split-form-container {
        padding: 0 var(--spacing-sm);
    }
    
    .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-lg); /* Убираем скругление на маленьких экранах */
    }
    
    .split-form-scroll {
        margin: 0;
        padding: 0;
        border-radius: 0;
        border: none;
    }
    
    .split-form-scroll form {
        padding: 0;
    }
    
    .split-form-section {
        padding: 0;
    }

    .split-form-section + .split-form-section {
        padding-top: var(--spacing-lg);
    }
}

/* Стили для списка оружия */
.weapon-list-content .weapon-list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    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(--spacing-md);
    margin-bottom: var(--spacing-md);
}

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

/* Десктопный subheader для форм редактирования */
.gc-desktop-subheader {
    background: var(--bg-content-main);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
}

.gc-desktop-subheader-back {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2xs);
    font-size: var(--font-size-sm);
    color: var(--font-secondary);
    text-decoration: none;
    margin-bottom: var(--spacing-xs);
    transition: color 0.2s ease;
}

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

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

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

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

.gc-form-help {
    font-size: var(--font-size-xs);
    color: var(--font-secondary);
    margin-top: var(--spacing-xs);
    margin-bottom: 0;
}

.gc-input-with-prefix {
    padding-left: 2.5rem;
}

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

.gc-form-actions {
    display: flex;
    gap: var(--spacing-sm);
}

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

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

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