.button-large,
.button-medium {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    border: none;
    cursor: pointer;
    font-family: var(--main-font);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-3);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.button-large:active,
.button-medium:active { transform: scale(.97); }
.button-large:disabled,
.button-medium:disabled { transform: none; }
.button-large { padding: 0 var(--space-24); height: 48px; font-size: 16px; line-height: 22px; }
.button-medium { padding: 0 var(--space-16); height: 36px; font-size: 14px; line-height: 22px; }

.button-dark { background: var(--color-grey-20); color: var(--color-grey-white); }
.button-dark:active { background: #000; }
.button-dark:disabled { background: var(--color-grey-94); color: var(--color-grey-74); pointer-events: none; }

.button__icon-box { width: 24px; height: 24px; border-radius: 4px; background: var(--color-grey-96); flex-shrink: 0; }
.button__chevron { width: 12px; height: 7px; flex-shrink: 0; color: var(--color-grey-52); }

.button-white {
    background: var(--color-white-transparent-85);
    color: var(--color-text-black);
    border: 1px solid var(--color-grey-82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.button-white:active { background: var(--color-grey-80-transparent-85); }
.button-white:disabled { background: var(--color-white-transparent-85); color: var(--color-grey-74); pointer-events: none; }

@media (min-width: 1024px) {
    .button-dark:hover { background: #000; }
    .button-white:hover { background: var(--color-grey-90-transparent-85); }
}

.tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.tab {
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 999px;
    padding: 11px 18px;
    font-family: var(--main-font);
    font-weight: var(--font-weight-bold);
    font-size: 16px;
    line-height: 22px;
    color: var(--color-grey-20);
    transition: background .12s ease, color .12s ease, transform .1s ease;
}
.tab:hover { background: var(--color-grey-94); }
.tab:active { transform: scale(.96); }
.tab.is-active { background: var(--color-grey-20); color: var(--color-grey-white); }
.tab.is-active:hover { background: var(--color-grey-20); }
.tab:disabled { color: var(--color-grey-74); cursor: default; pointer-events: none; }

:has(> .zoom-trigger) { cursor: pointer; }