/* ====================== FRAME VERSION HEADER ====================== */

.frameVersionHeader
{
    display: flex;
    align-items: center;
    gap: var(--layout-gap);

    width: 100%;
    min-height: 3em;
    height: fit-content;
    margin-bottom: var(--layout-gap);
    box-sizing: border-box;

    padding: var(--layout-padding) calc(var(--layout-padding) * 1.6);
    background: var(--color-background-secondary-II);
    border-radius: var(--layout-border-radius);

    flex-wrap: wrap;
}

/* Allow flex items to shrink properly */
.frameVersionHeader > *
{
    min-width: 0;
    flex-shrink: 1;
}

/* Middle version title - using .textElement style */
.version_header.frameVersionHeader_element
{
    flex: 1 1 auto;
    text-align: center;

    /* Reuse existing textElement styling */
    font-size: var(--font-label_large);
    letter-spacing: calc(var(--font-letter-spacing) / 2);

    color: var(--color-text-primary);
    text-transform: uppercase;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Buttons - styled like .textElement.labelMedium */
.frame_section_sidepanel_button.frameVersionHeader_element_button
{
    flex: 0 0 auto;
    padding: calc(var(--layout-padding) * 0.7) calc(var(--layout-padding) * 2);
    border-radius: var(--layout-border-radius);
    white-space: nowrap;

    font-size: var(--font-info_large);
    letter-spacing: calc(var(--font-letter-spacing) / 6);

    cursor: pointer;
    transition: all 0.3s ease;
    height: fit-content;
    min-height: 2em;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gradient colors */
.gradient.orange
{
    background: linear-gradient(90deg, var(--color-assets-Orange1), var(--color-assets-Orange2));
    color: #000;
}

.gradient.Purple
{
    background: linear-gradient(90deg, var(--color-purple-progress), #c300ff);
    color: #fff;
}

.changelog_extended_button
{
    text-transform: uppercase;
    letter-spacing: calc(var(--font-letter-spacing) / 2);
}

/* Hover effect */
.frameVersionHeader_element_button:hover
{
    filter: brightness(1.15);
    transform: scale(var(--animation-scale-adjust-small));
}

/* ====================== RESPONSIVE BEHAVIOR ====================== */

@media (max-width: 768px)
{
    .frameVersionHeader
    {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: calc(var(--layout-gap) * 0.9);
        padding: calc(var(--layout-padding) * 1.3);
    }

    .version_header.frameVersionHeader_element
    {
        order: 2;
        text-align: center;
        white-space: normal;
        font-size: var(--font-label_large);        /* slightly larger on mobile */
    }

    .frame_section_sidepanel_button.frameVersionHeader_element_button
    {
        justify-content: center;
        padding: calc(var(--layout-padding) * 0.9) calc(var(--layout-padding) * 2.2);
    }
}

/* Parent frame cleanup */
.frame.version
{
    width: 100%;
    gap: var(--layout-gap);
    box-sizing: border-box;
}


/* variables */
/* variables */
/* variables */