/* Shared KayStay topbar — mobile bar matches homepage (56px) */
:root {
    --topbar-height: 64px;
}

.topbar {
    min-height: var(--topbar-height);
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--brand-200, #e1e7de);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 5;
    flex-wrap: nowrap;
    overflow: hidden;
}

.brand-link,
.topbar__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 0%;
    overflow: hidden;
    text-decoration: none;
    color: var(--brand-900, #343836);
}

.brand-link > div,
.topbar__heading {
    min-width: 0;
}

.brand-link > div {
    overflow: hidden;
    flex: 1 1 auto;
}

.brand-link img {
    height: 32px;
    width: auto;
    flex-shrink: 0;
}

.title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--brand-800, #5e6360);
}

.actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex: 0 0 auto;
    flex-shrink: 0;
}

.topbar .btn {
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 9999px;
    padding: 10px 14px;
    border: 1px solid var(--brand-200, #e1e7de);
    color: var(--brand-900, #343836);
    background: var(--white, #ffffff);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    flex-shrink: 0;
}

.topbar .btn.primary {
    background: var(--brand-accent, #7a8c66);
    color: var(--white, #ffffff);
    border-color: var(--brand-accent, #7a8c66);
}

.frame-wrap {
    height: calc(100dvh - var(--topbar-height));
}

@media (max-width: 767px) {
    :root {
        --topbar-height: 56px;
    }

    .topbar {
        height: 56px;
        min-height: 56px;
        max-height: 56px;
        padding: 0 12px;
        gap: 8px;
    }

    .brand-link img {
        height: 36px;
    }

    .subtitle {
        display: none;
    }

    .title {
        display: block;
        font-size: 12px;
        line-height: 1.25;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .topbar__heading:not(.brand-link) {
        display: block;
    }

    .actions {
        gap: 6px;
    }

    .topbar .btn {
        font-size: 10px;
        padding: 8px 11px;
        min-height: 34px;
    }

    .topbar .topbar__btn-secondary {
        display: none;
    }

    .topbar .lang-slot {
        margin-left: 0;
        padding-left: 6px;
        border-left: 1px solid var(--brand-200, #e1e7de);
        width: auto;
        padding-top: 0;
        flex-shrink: 0;
    }
}