/* ===================================
   Join Form - Форма заявки на мероприятие
   =================================== */

/* Шапка мероприятия */
.join-event-header {
    margin-bottom: var(--spacing-md);
}

.join-event-cover {
    position: relative;
}

.join-event-cover-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.join-event-cover-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    background: linear-gradient(0deg, rgba(22,22,23,0.9) 0%, rgba(22,22,23,0.3) 70%);
    height: 100%;
}

.join-event-title {
    margin-bottom: var(--spacing-xs);
    font-weight: 700;
    color: white;
    font-size: var(--font-size-xl);
}

.join-event-subtitle {
    font-weight: 400;
    color: rgba(255,255,255,0.7);
    margin-bottom: 0;
}

.join-event-organizer-wrapper {
    display: flex;
    align-items: center;
    margin-top: auto;
}

.join-event-organizer-link {
    border: 1px solid rgba(255,255,255,0.2);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 100%;
    transition: border-color var(--transition-fast);
}

.join-event-organizer-link:hover {
    border-color: rgba(255,255,255,0.4);
}

.join-event-organizer-info {
    display: flex;
    align-items: center;
}

.join-event-organizer-avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: var(--spacing-sm);
}

.join-event-organizer-name {
    font-weight: 500;
    margin-bottom: 0;
    color: white;
}

.join-event-organizer-label {
    color: rgba(255,255,255,0.7);
    font-size: var(--font-size-sm);
}

/* Секция информации */
.join-info-section {
    text-align: center;
}

.join-info-box {
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    background: var(--bg-content-secondary);
}

.join-info-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    display: block;
}

.join-info-title {
    font-weight: 700;
    color: var(--font-primary);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-lg);
}

.join-info-text {
    color: var(--font-secondary);
    margin-bottom: var(--spacing-md);
}

/* Заявка */
.join-request-header {
    text-align: center;
}

.join-request-title {
    font-weight: 700;
    color: var(--font-primary);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-xl);
}

.join-request-description {
    color: var(--font-secondary);
    font-size: var(--font-size-sm);
}

.join-request-card {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.join-request-avatar {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
}

.join-request-name {
    color: var(--font-primary);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.join-request-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: var(--font-secondary);
}

.join-request-meta-link {
    color: var(--font-secondary);
    text-decoration: none;
}

.join-request-meta-separator {
    margin: 0 var(--spacing-sm);
    color: var(--font-secondary);
}

.join-request-transport {
    display: flex;
    align-items: center;
}

.join-transport-indicator {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    margin-right: var(--spacing-sm);
}

.join-transport-text {
    color: var(--font-secondary);
}

/* Кнопки действий */
.join-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.join-actions .gc-btn {
    flex: 1;
    text-align: center;
}

/* Футер формы */
.join-form-footer {
    color: var(--font-secondary);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-md);
    margin-bottom: 0;
    text-align: center;
}

/* Формы внутри gc-card-body должны быть flex-контейнерами для правильной работы gap */
.gc-card-body > .gc-form,
.gc-card-body > form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Убираем margin-bottom у элементов внутри форм с gap, чтобы не было двойных отступов */
.gc-card-body > .gc-form-group,
.gc-card-body > div,
.gc-card-body > .gc-form > .gc-form-group,
.gc-card-body > form > .gc-form-group,
.gc-card-body > .gc-form > div,
.gc-card-body > form > div {
    margin-bottom: 0;
}

/* Транспортная форма */
#transportAccordion .gc-accordion-body {
    padding: 0;
}

.transport-section-header {
    display: flex;
    align-items: center;
    width: 100%;
}

.transport-section-icon {
    margin-right: var(--spacing-md);
    color: var(--font-secondary);
    background-color: var(--bg-content-secondary);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    border-radius: var(--radius-lg);
}

.gc-accordion-button:not(.collapsed) .transport-section-icon,
.gc-accordion-button.gc-accordion-readonly:not(.collapsed) .transport-section-icon {
    color: white;
    background-color: var(--accent-primary);
}

.transport-section-content {
    flex: 1;
}

.transport-section-title {
    display: block;
    font-weight: 600;
    color: var(--font-primary);
    font-size: var(--font-size-md);
}

.transport-section-subtitle {
    display: block;
    color: var(--font-secondary);
    font-size: var(--font-size-sm);
}

.transport-body-section {
    padding: var(--spacing-md);
    padding-top: 0;
}

.transport-empty-state {
    font-size: var(--font-size-sm);
    text-align: center;
    color: var(--font-secondary);
}

.transport-empty-state .ph {
    margin-right: var(--spacing-xs);
}

.transport-section-heading {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-mdl);
    font-weight: 600;
    color: var(--font-primary);
    margin-bottom: var(--spacing-sm);
}

.transport-list {
    margin-bottom: var(--spacing-md);
}

.transport-list .gc-radio-wrapper {
    margin-bottom: var(--spacing-sm);
}

.transport-list .gc-radio-wrapper:last-child {
    margin-bottom: 0;
}


.transport-toggle-wrapper {
    margin-top: var(--spacing-md);
}

.transport-location-section {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-primary);
}

.transport-location-header {
    margin-bottom: var(--spacing-sm);
}

/* Убираем нижний margin у заголовка если нет списка локаций */
.transport-location-section:not(:has(.transport-location-list)) .transport-location-header {
    margin-bottom: 0;
}

.transport-location-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-mdl);
    font-weight: 600;
    color: var(--font-primary);
    margin-bottom: 0;
}

.transport-location-subtitle {
    color: var(--font-secondary);
    font-size: var(--font-size-sm);
}

.transport-location-empty {
    font-size: var(--font-size-sm);
    padding: var(--spacing-md);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--font-secondary);
}

.transport-location-list .gc-radio-wrapper {
    margin-top: var(--spacing-sm);
}

.transport-location-list .gc-radio-wrapper:first-child {
    margin-top: 0;
}

.transport-location-address {
    color: var(--font-secondary);
    margin-left: var(--spacing-xs);
}

.transport-help-text {
    color: var(--font-secondary);
    display: block;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

/* Секции лоадаута (оружие) */
.loadout-section {
    margin-top: var(--spacing-md);
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.loadout-weapon-type {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.loadout-empty-state {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    text-align: center;
    color: var(--font-secondary);
}

.join-form-actions {
    margin-top: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-sm);
}

.join-form-actions .gc-btn {
    flex: 1;
    text-align: center;
}

.loadout-empty-state .ph {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
    display: block;
    opacity: 0.5;
}

.loadout-empty-state-text {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-sm);
}

/* ===================================
   Карточка заявки - использует UI-kit (gc-card)
   =================================== */

/* Readonly состояние для accordion button (дополнение к UI-kit) */
.gc-accordion-button.gc-accordion-readonly {
    cursor: default;
    pointer-events: none;
}

.gc-accordion-button.gc-accordion-readonly.collapsed {
    opacity: 0.5;
}

/* В открытом readonly режиме применяем opacity только к тексту, иконка остаётся яркой */
.gc-accordion-button.gc-accordion-readonly:not(.collapsed) .transport-section-content {
    opacity: 0.7;
}

/* Disabled для gc-select trigger (дополнение к UI-kit) */
.gc-select-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--bg-content-secondary);
}

/* Responsive для мобильных */
@media (max-width: 768px) {
    /* Отступ сверху для шапки в мобильной версии (от нижнего навбара нет нужды в отступе) */
    .join-event-header {
        margin-top: var(--spacing-md);
    }
    
    .join-event-cover-img {
        height: 180px;
    }
    
    /* Убираем градиент на всю высоту в адаптиве */
    .join-event-cover-overlay {
        height: auto;
        min-height: auto;
        justify-content: space-between;
        gap: var(--spacing-lg); /* Увеличиваем отступ между заголовком и организатором */
    }
    
    .join-request-meta {
        font-size: var(--font-size-sm);
    }
}