/**
 * GunCult - Кнопки
 * shadcn-inspired: быстрые переходы, без lift-анимаций, чистые hover-состояния
 */

/* ─── Базовая кнопка ─────────────────────────────────────────────────────── */

.gc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gc-btn-gap);
    position: relative;
    box-sizing: border-box;
    min-height: var(--gc-btn-min-height);
    border-radius: var(--gc-btn-radius);
    /* better-ui: named props + press scale; ease 0.2,0,0,1 ≠ --ease-out */
    transition-property: transform, background-color, color, border-color, box-shadow;
    transition-duration: var(--transition-fast);
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    font-weight: var(--font-weight-medium);
    font-size: var(--gc-btn-font-size);
    padding-inline: var(--gc-btn-padding-x);
    line-height: 1.25;
    letter-spacing: 0.0125em;
    border: none;
    background-color: transparent;
    font-family: var(--font-family-base, inherit);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Не keyword `none` в multi box-shadow — иначе весь shadow invalid и hairline outline пропадает */
    --gc-btn-elevation: 0 0 #0000;
    --gc-btn-hairline: 0 0 #0000;
    box-shadow: var(--gc-btn-elevation), var(--gc-btn-hairline);
}

.gc-btn:hover {
    text-decoration: none;
}

/* Tactile press — opt-out: group / segmented / static (dense shared edges) */
.gc-btn:active:not(:disabled):not([disabled]):not([aria-disabled='true']) {
    transform: scale(0.96);
}

.gc-btn-group > .gc-btn:active,
.gc-btn.gc-event-feed-action-segmented:active,
.gc-btn.gc-btn-press-static:active,
html.gc-touch-scrolling .gc-btn:active {
    transform: none;
}

.gc-btn:focus-visible {
    outline: var(--gc-focus-outline);
    outline-offset: var(--gc-focus-outline-offset);
    box-shadow: var(--gc-btn-hairline), var(--gc-btn-elevation);
}

.gc-btn:disabled,
.gc-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    color: var(--text-secondary);
    pointer-events: none;
    --gc-btn-elevation: 0 0 #0000;
    /* Не --surface-control: в light это elevated gray/200 — outline/ghost становятся «чёрными плашками». */
}

/* Плашечные filled-варианты — лёгкая глубина (кроме primary/black/secondary — flat) */
.gc-btn-accent,
.gc-btn-surface,
.gc-btn-success,
.gc-btn-valid,
.gc-btn-danger,
.gc-btn-invalid,
.gc-btn-warning {
    --gc-btn-elevation: var(--shadow-sm);
}

/* Primary / black — flat inverse CTA, без тени и бордера */
.gc-btn-primary,
.gc-btn-black {
    --gc-btn-elevation: 0 0 #0000;
}

/* Outline — flat + inset hairline (не keyword none в elevation) */
.gc-btn-outline {
    --gc-btn-elevation: 0 0 #0000;
}

/* ─── Primary (theme-aware CTA: Fill/Primary) ─────────────────────────────── */

.gc-btn-primary,
.gc-btn-black {
    background-color: var(--gc-btn-primary-bg);
    background-image: none;
    color: var(--gc-btn-primary-fg);
}

.gc-btn-primary:hover:not(:disabled):not([disabled]),
.gc-btn-black:hover:not(:disabled):not([disabled]) {
    background-color: var(--gc-btn-primary-hover-bg);
    background-image: linear-gradient(
        180deg,
        var(--gc-btn-primary-hover-gradient-top) 0%,
        var(--gc-btn-primary-hover-bg) 100%
    );
    color: var(--gc-btn-primary-fg);
}

.gc-btn-primary:active:not(:disabled):not([disabled]),
.gc-btn-black:active:not(:disabled):not([disabled]) {
    background-color: var(--gc-btn-primary-hover-bg);
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--gc-btn-primary-hover-gradient-top) 72%, var(--gc-btn-primary-hover-bg)) 0%,
        var(--gc-btn-primary-hover-bg) 100%
    );
    color: var(--gc-btn-primary-fg);
    opacity: 0.92;
}

/* ─── Secondary — soft fill (surface-agnostic, color-mix text-primary) ───── */

.gc-btn-secondary {
    --gc-btn-elevation: 0 0 #0000;
    background-color: var(--gc-btn-secondary-bg);
    color: var(--text-primary);
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: var(--type-ui-caption-line-height);
}

.gc-btn-secondary:not(.gc-btn-sm):not(.gc-btn-lg) {
    min-height: var(--gc-btn-md-min-height);
    padding-inline: var(--gc-btn-padding-x-md);
    padding-block: var(--gc-btn-padding-y-md);
}

.gc-btn-secondary:hover,
.gc-btn-secondary[aria-expanded="true"] {
    background-color: var(--gc-btn-secondary-hover-bg);
    color: var(--text-primary);
    box-shadow: var(--gc-btn-soft-hover-shadow);
}

.gc-btn-secondary:active {
    background-color: var(--gc-btn-secondary-hover-bg);
    box-shadow: var(--gc-btn-soft-hover-shadow);
}

/* Subtle — слабее secondary; тот же relative fill, не surface-subtle */
.gc-btn-subtle {
    --gc-btn-elevation: 0 0 #0000;
    background-color: var(--gc-btn-subtle-bg);
    color: var(--text-primary);
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: var(--type-ui-caption-line-height);
}

.gc-btn-subtle:not(.gc-btn-sm):not(.gc-btn-lg) {
    min-height: var(--gc-btn-md-min-height);
    padding-inline: var(--gc-btn-padding-x-md);
    padding-block: var(--gc-btn-padding-y-md);
}

.gc-btn-subtle:hover,
.gc-btn-subtle[aria-expanded="true"] {
    background-color: var(--gc-btn-subtle-hover-bg);
    color: var(--text-primary);
    box-shadow: var(--gc-btn-soft-hover-shadow);
}

.gc-btn-subtle:active {
    background-color: var(--gc-btn-subtle-hover-bg);
    box-shadow: var(--gc-btn-soft-hover-shadow);
}

.gc-btn-secondary:focus-visible,
.gc-btn-subtle:focus-visible {
    box-shadow: var(--gc-btn-soft-hover-shadow);
}

/* ─── Outline: transparent + inset ring (border-default, surface-agnostic) ─ */

.gc-btn-outline {
    --gc-btn-hairline: inset 0 0 0 1px var(--gc-btn-outline-ring);
    border: none;
    background-color: var(--gc-btn-outline-bg);
    color: var(--text-primary);
}

.gc-btn-outline:hover,
.gc-btn-outline[aria-expanded="true"] {
    background-color: var(--gc-btn-outline-hover-bg);
    color: var(--text-primary);
    --gc-btn-hairline: inset 0 0 0 1px var(--gc-btn-outline-ring-hover);
    box-shadow: var(--gc-btn-hairline), var(--gc-btn-soft-hover-shadow);
}

.gc-btn-outline:active {
    background-color: var(--gc-btn-outline-hover-bg);
    --gc-btn-hairline: inset 0 0 0 1px var(--gc-btn-outline-ring-hover);
    box-shadow: var(--gc-btn-hairline), var(--gc-btn-soft-hover-shadow);
}

.gc-btn-outline:focus-visible {
    --gc-btn-hairline: inset 0 0 0 1px var(--gc-btn-outline-ring-hover);
    box-shadow: var(--gc-btn-hairline), var(--gc-btn-soft-hover-shadow);
}

/* Segmented action — Figma segment (1532:25170): border-subtle, radius-10, ghost segments 32px */
.gc-event-feed-action-segmented {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    max-width: 100%;
    min-height: var(--gc-btn-sm-min-height);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-10);
    background: transparent;
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: calc(20 / 14);
    box-sizing: border-box;
}

.gc-btn.gc-event-feed-action-segmented {
    --gc-btn-hairline: 0 0 #0000;
    box-shadow: none;
    padding-inline: 0;
    padding-block: 0;
    background: transparent;
    border: 1px solid var(--border-subtle);
}

.gc-btn.gc-event-feed-action-segmented:hover,
.gc-btn.gc-event-feed-action-segmented:focus-visible {
    background: var(--surface-interaction-control-hover);
    color: var(--text-primary);
    --gc-btn-hairline: 0 0 #0000;
    box-shadow: none;
}

.gc-btn.gc-event-feed-action-segmented:active {
    background: var(--surface-control);
}

.gc-btn.gc-event-feed-action-segmented:focus-visible {
    box-shadow: none;
}

.gc-event-feed-action-segmented--static {
    cursor: default;
}

.gc-event-feed-action-segmented .gc-event-feed-action-segment-divider {
    flex-shrink: 0;
    width: 1px;
    align-self: stretch;
    background: var(--border-subtle);
}

.gc-event-feed-action-segmented .gc-event-feed-action-main,
.gc-event-feed-action-segmented .gc-event-feed-action-price {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    gap: var(--space-1);
    padding: var(--space-1-5) var(--space-3);
    min-width: 0;
    white-space: nowrap;
}

.gc-event-feed-action-segmented .gc-event-feed-action-main {
    justify-content: center;
}

.gc-event-feed-action-segmented .gc-event-feed-action-price {
    font-weight: 500;
    color: var(--text-primary);
}

.gc-event-feed-action-segmented:not(.gc-event-feed-action-segmented--price-first) .gc-event-feed-action-price {
    border-left: 1px solid var(--border-subtle);
}

.gc-event-feed-action-segmented--price-first .gc-event-feed-action-price {
    border-left: none;
}

.gc-event-feed-action-segmented .gc-event-feed-action-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-event-feed-action-segmented.gc-event-feed-action--request-sent:disabled,
.gc-event-feed-action-segmented.gc-event-feed-action--request-sent[disabled] {
    opacity: 1;
    cursor: default;
    color: var(--text-primary);
    background: transparent;
}

/* Bordered — Secondary fill + border-subtle; sm 32px, md 36px (Soho h-9) */
.gc-btn-bordered {
    --gc-btn-elevation: 0 0 #0000;
    --gc-btn-hairline: 0 0 #0000;
    box-sizing: border-box;
    height: var(--gc-btn-sm-min-height);
    min-height: var(--gc-btn-sm-min-height);
    padding-block: var(--gc-btn-padding-y-sm);
    padding-inline: var(--gc-btn-padding-x-sm);
    border-radius: var(--gc-btn-sm-radius);
    border: 1px solid var(--gc-btn-outline-border, var(--border-subtle));
    background-color: var(--surface-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
    line-height: var(--type-ui-caption-line-height);
    box-shadow: none;
    /* better-ui: keep transform for press scale(0.96) from .gc-btn */
    transition-property: transform, background-color, border-color, color, box-shadow;
    transition-duration: var(--transition-fast);
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.gc-btn-bordered.gc-btn-md {
    height: var(--gc-btn-md-min-height);
    min-height: var(--gc-btn-md-min-height);
    padding-block: var(--gc-btn-padding-y-md);
    padding-inline: var(--gc-btn-padding-x-md);
    border-radius: var(--gc-btn-radius);
}

/* Icon-only sm — Figma btns/bordered type=icon (1277:18913 list rows) */
.gc-btn-bordered.gc-btn-icon-sm,
.gc-btn.gc-btn-secondary.gc-btn-icon-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--gc-btn-sm-min-height);
    height: var(--gc-btn-sm-min-height);
    min-width: var(--gc-btn-sm-min-height);
    min-height: var(--gc-btn-sm-min-height);
    padding: 0;
    border-radius: var(--gc-btn-icon-radius-sm);
}

.gc-btn-bordered.gc-btn-icon-sm i,
.gc-btn-bordered.gc-btn-icon-sm svg,
.gc-btn.gc-btn-secondary.gc-btn-icon-sm i,
.gc-btn.gc-btn-secondary.gc-btn-icon-sm svg {
    font-size: var(--font-size-base);
    line-height: 1;
}

.gc-btn.gc-btn-secondary.gc-btn-icon {
    padding: 0;
    width: var(--gc-btn-md-min-height);
    height: var(--gc-btn-md-min-height);
    min-width: var(--gc-btn-md-min-height);
    min-height: var(--gc-btn-md-min-height);
}

.gc-btn-bordered:hover,
.gc-btn-bordered[aria-expanded="true"] {
    background-color: var(--gc-btn-bordered-hover-bg);
    border-color: var(--gc-btn-bordered-border-hover);
    color: var(--text-primary);
    box-shadow: var(--gc-btn-soft-hover-shadow);
}

.gc-btn-bordered:active {
    background-color: var(--gc-btn-bordered-hover-bg);
    color: var(--text-primary);
    box-shadow: var(--gc-btn-soft-hover-shadow);
}

.gc-btn-bordered:focus-visible {
    outline: var(--gc-focus-outline);
    outline-offset: var(--gc-focus-outline-offset);
    border-color: var(--gc-btn-bordered-border-hover);
    box-shadow: var(--gc-btn-soft-hover-shadow);
}


/* Опциональный chip-иконки справа (Mobbin arrow) — markup, не variant */
.gc-btn-trailing-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-inline-end: calc(-1 * var(--space-1));
    padding: var(--space-1);
    border-radius: var(--radius-full);
    background-color: var(--surface-control);
    line-height: 1;
}

.gc-btn-trailing-badge i,
.gc-btn-trailing-badge svg {
    font-size: 1em;
    width: 1em;
    height: 1em;
    color: currentColor;
}

.gc-btn-with-icon--trailing-badge {
    gap: var(--space-2);
}

/* ─── Ghost (shadcn ghost: transparent, no border) ──────────────────────── */

.gc-btn-ghost {
    font-weight: 500;
    font-size: var(--font-size-14);
    line-height: var(--type-ui-caption-line-height);
    background-color: transparent;
    color: var(--text-primary);
    border-color: transparent;
    transition:
        background-color var(--transition-fast) var(--ease-out),
        color var(--transition-fast) var(--ease-out);
}

.gc-btn-ghost:hover,
.gc-btn-ghost:focus-visible,
.gc-btn-ghost[aria-expanded="true"] {
    background-color: var(--gc-btn-ghost-hover-bg);
    color: var(--text-primary);
}

.gc-btn-ghost:active {
    background-color: var(--gc-btn-ghost-hover-bg);
}

.gc-btn-md.gc-btn-ghost:not(.gc-btn-sm) {
    padding-block: var(--space-3);
    padding-inline: var(--space-3);
}

/* ─── Link (shadcn link: accent color, underline on hover) ─────────────── */

.gc-btn-link {
    font-weight: 500;
    background-color: transparent;
    border-color: transparent;
    color: var(--accent-link);
    text-decoration: none;
    padding-left: 0;
    padding-right: 0;
}

.gc-btn-link:hover {
    color: var(--accent-link-hover);
    text-decoration: underline;
}

.gc-btn-link:active {
    opacity: 0.8;
}

/* ─── Accent (= Primary alias, без пульсации) ────────────────────────────── */

.gc-btn-accent {
    background-color: var(--accent-link);
    color: var(--text-on-solid);
    border-color: var(--accent-link);
}

.gc-btn-accent:hover {
    background-color: var(--accent-link-hover);
    border-color: var(--accent-link-hover);
    color: var(--text-on-solid);
}

.gc-btn-accent:active {
    opacity: 0.9;
}

/* ─── Text (алиас gc-btn-ghost, оставлен для совместимости) ─────────────── */

.gc-btn-text {
    font-weight: 500;
    background-color: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}

.gc-btn-text:hover {
    background-color: var(--surface-row-hover);
    color: var(--text-primary);
}

.gc-btn-text:active {
    background-color: var(--surface-control);
}

.gc-btn-text-accent {
    background-color: transparent;
    border-color: transparent;
    color: var(--accent-link);
}

.gc-btn-text-accent:hover {
    background-color: var(--ui-accent-soft);
    color: var(--accent-link-hover);
}

.gc-btn-text-accent:active {
    background-color: var(--ui-accent-soft-strong);
    color: var(--accent-link-hover);
}

/* ─── Text danger ────────────────────────────────────────────────────────── */

.gc-btn-text-danger {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}

.gc-btn-text-danger:hover {
    background-color: var(--ui-danger-soft);
    color: var(--danger-color);
}

.gc-btn-text-danger:active {
    background-color: var(--ui-danger-soft-strong);
    color: var(--danger-color);
}


/* ─── Surface: белая кнопка на цветном/сером фоне ───────────────────────── */

.gc-btn-surface {
    background-color: var(--surface-control);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.gc-btn-surface:hover {
    background-color: var(--surface-control);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.gc-btn-surface:active {
    background-color: var(--surface-control);
}

/* ─── Status colors (используют переменные, не Bootstrap-хардкод) ─────────── */

.gc-btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: var(--text-on-solid);
}

.gc-btn-success:hover {
    background-color: color-mix(in srgb, var(--success-color) 85%, black);
    border-color: color-mix(in srgb, var(--success-color) 85%, black);
    color: var(--text-on-solid);
}

.gc-btn-valid {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: var(--text-on-solid);
}

.gc-btn-valid:hover {
    background-color: color-mix(in srgb, var(--success-color) 85%, black);
    border-color: color-mix(in srgb, var(--success-color) 85%, black);
    color: var(--text-on-solid);
}

.gc-btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: var(--text-on-solid);
}

.gc-btn-danger:hover {
    background-color: color-mix(in srgb, var(--danger-color) 85%, black);
    border-color: color-mix(in srgb, var(--danger-color) 85%, black);
    color: var(--text-on-solid);
}

.gc-btn-invalid {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: var(--text-on-solid);
}

.gc-btn-invalid:hover {
    background-color: color-mix(in srgb, var(--danger-color) 85%, black);
    border-color: color-mix(in srgb, var(--danger-color) 85%, black);
    color: var(--text-on-solid);
}

.gc-btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: var(--text-on-solid);
}

.gc-btn-warning:hover {
    background-color: color-mix(in srgb, var(--warning-color) 85%, black);
    border-color: color-mix(in srgb, var(--warning-color) 85%, black);
    color: var(--text-on-solid);
}

/* ─── Compatibility combos ───────────────────────────────────────────────── */

.gc-btn-ghost.gc-btn-danger,
.gc-btn-text.gc-btn-danger {
    background-color: transparent;
    color: var(--danger-color);
    border-color: transparent;
}

.gc-btn-ghost.gc-btn-danger:hover,
.gc-btn-text.gc-btn-danger:hover {
    background-color: var(--ui-danger-soft);
    color: var(--danger-color);
    border-color: transparent;
}

.gc-btn-ghost.gc-btn-danger:active,
.gc-btn-text.gc-btn-danger:active {
    background-color: var(--ui-danger-soft-strong);
    color: var(--danger-color);
}

.gc-btn-outline.gc-btn-danger {
    background-color: var(--gc-btn-outline-bg);
    color: var(--danger-color);
    --gc-btn-hairline: inset 0 0 0 1px color-mix(in srgb, var(--danger-color) 45%, transparent);
}

.gc-btn-outline.gc-btn-danger:hover {
    background-color: var(--ui-danger-soft);
    color: var(--danger-color);
    --gc-btn-hairline: inset 0 0 0 1px var(--danger-color);
}

/* ─── Sizes ──────────────────────────────────────────────────────────────── */

.gc-btn-lg {
    min-height: calc(var(--gc-btn-min-height) + var(--space-1));
    padding-inline: var(--gc-btn-padding-x-lg);
    font-size: var(--gc-btn-font-size-lg);
    line-height: 1.375;
}

.gc-btn-sm,
.gc-btn-md {
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: var(--type-ui-caption-line-height);
}

.gc-btn-sm {
    min-height: var(--gc-btn-sm-min-height);
    padding-inline: var(--gc-btn-padding-x-sm);
    padding-block: var(--gc-btn-padding-y-sm);
    border-radius: var(--gc-btn-sm-radius);
}

.gc-btn-md {
    min-height: var(--gc-btn-md-min-height);
    padding-inline: var(--gc-btn-padding-x-md);
    padding-block: var(--gc-btn-padding-y-md);
}

/* Flat chrome: event show split-layout — без elevation на filled, outline через hairline */
.gc-chrome-flat :is(
    .gc-btn-primary,
    .gc-btn-secondary,
    .gc-btn-subtle,
    .gc-btn-bordered,
    .gc-btn-black,
    .gc-btn-accent,
    .gc-btn-surface,
    .gc-btn-success,
    .gc-btn-valid,
    .gc-btn-danger,
    .gc-btn-invalid,
    .gc-btn-warning
) {
    --gc-btn-elevation: 0 0 #0000;
    box-shadow: none;
}

.gc-chrome-flat .gc-btn-bordered:focus-visible {
    box-shadow: none;
}

.gc-chrome-flat .gc-btn-outline {
    --gc-btn-elevation: 0 0 #0000;
    box-shadow: var(--gc-btn-hairline);
}

.gc-chrome-flat :is(.gc-btn-primary, .gc-btn-secondary, .gc-btn-subtle):focus-visible {
    box-shadow: none;
}

.gc-chrome-flat .gc-btn-outline:focus-visible {
    box-shadow: var(--gc-btn-hairline);
}

.gc-chrome-flat .gc-dropdown-toggle-icon.gc-dropdown-toggle-outline {
    box-shadow: inset 0 0 0 1px var(--gc-btn-outline-ring);
}

.gc-chrome-flat .gc-dropdown-toggle-icon.gc-dropdown-toggle-outline:is(:hover, :focus-visible, [aria-expanded="true"]) {
    box-shadow: inset 0 0 0 1px var(--gc-btn-outline-ring-hover);
}

.gc-chrome-flat .gc-dropdown-toggle-icon.gc-dropdown-toggle-outline:focus-visible {
    outline: var(--gc-focus-outline);
    outline-offset: var(--gc-focus-outline-offset);
    box-shadow: inset 0 0 0 1px var(--gc-btn-outline-ring-hover);
}

.gc-btn-rounded {
    /* Pill на md/lg. У .gc-btn-sm капсула уже в --gc-btn-sm-radius. */
    border-radius: var(--radius-full);
}

/* ─── Icon buttons ───────────────────────────────────────────────────────── */

.gc-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--gc-btn-icon-radius);
    min-width: var(--gc-btn-md-min-height);
    min-height: var(--gc-btn-md-min-height);
}

.gc-btn-icon-sm {
    padding: 0;
    min-width: var(--gc-btn-sm-min-height);
    min-height: var(--gc-btn-sm-min-height);
    border-radius: var(--gc-btn-icon-radius-sm);
}

.gc-btn-icon-xs {
    padding: 0;
    width: var(--gc-dropdown-icon-toggle-size-xs);
    height: var(--gc-dropdown-icon-toggle-size-xs);
    min-width: var(--gc-dropdown-icon-toggle-size-xs);
    min-height: var(--gc-dropdown-icon-toggle-size-xs);
    border-radius: var(--gc-btn-xs-radius);
}

.gc-btn-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: var(--gc-btn-md-min-height);
    height: var(--gc-btn-md-min-height);
    min-width: var(--gc-btn-md-min-height);
    min-height: var(--gc-btn-md-min-height);
    flex-shrink: 0;
    border-radius: var(--gc-btn-icon-radius);
}

.gc-btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.gc-btn-with-icon i,
.gc-btn-with-icon svg {
    transition: none;
}

/* Иконки внутри кнопки — 1em от кегля кнопки, цвет наследуется */
.gc-btn i,
.gc-btn svg {
    font-size: 1em;
    width: 1em;
    height: 1em;
    line-height: 1;
    flex-shrink: 0;
    color: currentColor;
}

/* Primary: глиф plus/иконка — text-on-fill-primary, не text-on-solid (белый на белой кнопке в dark) */
.gc-btn-primary i,
.gc-btn-primary svg,
.gc-btn-primary i::before,
.gc-btn-black i,
.gc-btn-black svg,
.gc-btn-black i::before {
    color: var(--gc-btn-primary-fg);
}

/* Touch-friendly минимумы */
@media (max-width: 768px) {
    .gc-btn-icon {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ─── Loading state ──────────────────────────────────────────────────────── */

.gc-btn-loading {
    --gc-btn-spinner-color: var(--text-primary);
    position: relative;
    color: transparent !important;
    pointer-events: none;
    cursor: not-allowed;
}

.gc-btn-loading:not([data-tooltip])::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    top: 50%;
    left: 50%;
    margin-left: -7px;
    margin-top: -7px;
    border: 2px solid transparent;
    /* не currentColor: у .gc-btn-loading color:transparent */
    border-top-color: var(--gc-btn-spinner-color);
    border-radius: 50%;
    animation: gc-btn-spin 0.6s linear infinite;
}

.gc-btn-primary.gc-btn-loading,
.gc-btn-black.gc-btn-loading {
    --gc-btn-spinner-color: var(--gc-btn-primary-fg);
}

.gc-btn-accent.gc-btn-loading,
.gc-btn-success.gc-btn-loading,
.gc-btn-danger.gc-btn-loading,
.gc-btn-valid.gc-btn-loading,
.gc-btn-invalid.gc-btn-loading,
.gc-btn-warning.gc-btn-loading {
    --gc-btn-spinner-color: var(--text-on-solid);
}

.gc-btn-secondary.gc-btn-loading::after,
.gc-btn-subtle.gc-btn-loading::after,
.gc-btn-bordered.gc-btn-loading::after,
.gc-btn-outline.gc-btn-loading::after,
.gc-btn-ghost.gc-btn-loading::after,
.gc-btn-text.gc-btn-loading::after,
.gc-btn-link.gc-btn-loading::after,
.gc-btn-text-accent.gc-btn-loading::after,
.gc-btn-text-danger.gc-btn-loading::after,
.gc-btn-surface.gc-btn-loading::after {
    border-top-color: var(--text-primary);
}

/* Loading блокирует кнопку, но сохраняет цвет спиннера её варианта. */
.gc-btn-loading:disabled::after,
.gc-btn-loading[disabled]::after {
    border-top-color: var(--gc-btn-spinner-color);
}

@keyframes gc-btn-spin {
    to { transform: rotate(360deg); }
}

/* Copy success flash — share / data-copy-text (link → check). */
@keyframes gc-btn-copy-pop {
    0% {
        transform: scale(0.55);
        opacity: 0.35;
    }
    55% {
        transform: scale(1.18);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.gc-btn.is-copied > i {
    animation: gc-btn-copy-pop 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Спиннер вне кнопки (поиск, инлайн-статус). Тот же motion, что .gc-btn-loading. */
.gc-spinner {
    display: inline-block;
    box-sizing: border-box;
    width: 1em;
    height: 1em;
    font-size: var(--font-size-16);
    border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: gc-btn-spin 0.6s linear infinite;
    flex-shrink: 0;
    vertical-align: middle;
}

.gc-spinner--sm {
    font-size: var(--font-size-14);
}

.gc-spinner--md {
    font-size: var(--font-size-16);
}

.gc-spinner--lg {
    font-size: var(--font-size-24);
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */

.gc-card-btn {
    margin-top: var(--space-4);
    width: 100%;
    text-align: center;
}

/* ─── Fixed / Sticky (мобильные) ─────────────────────────────────────────── */

.gc-btn-fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
    padding: var(--space-4);
    background-color: var(--surface-sunken);
    border-top: 1px solid var(--border-subtle);
    transform: translateY(100%);
    transition: transform var(--transition-base) var(--ease-out);
    display: none;
}

.gc-btn-fixed-bottom.visible {
    transform: translateY(0);
    display: block;
}

.gc-btn-fixed-bottom .gc-btn {
    width: 100%;
    display: block;
}

.gc-mobile-sticky-btn {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--surface-sunken);
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    border-top: 1px solid var(--border-subtle);
    z-index: var(--z-notification);
    transition: transform var(--transition-base) var(--ease-out);
}

.gc-mobile-sticky-btn.slide-up {
    transform: translateY(100%);
    opacity: 0;
}

.gc-mobile-sticky-btn.slide-up.visible {
    transform: translateY(0);
    opacity: 1;
}

@media (max-width: 768px) {
    .gc-mobile-sticky-btn { display: block; }
    .gc-desktop-only-btn  { display: none; }
}

/* ─── Responsive helpers ─────────────────────────────────────────────────── */

@media (max-width: 576px) {
    .gc-btn-mobile-full {
        width: 100%;
        display: block;
    }

    .gc-btn-group-mobile-vertical {
        flex-direction: column;
        width: 100%;
    }

    .gc-btn-group-mobile-vertical .gc-btn {
        width: 100%;
        margin-bottom: var(--space-2);
    }
}

/* tooltip override */
.gc-btn[data-tooltip] { overflow: visible !important; }

/* footer padding */
.gc-footer-padding { padding-bottom: 70px; }

/* ─── Button Group ────────────────────────────────────────────────────────── */
.gc-btn-group > .gc-btn,
.gc-btn-group > .gc-dropdown > .gc-dropdown-toggle {
    --gc-btn-elevation: 0 0 #0000;
}

/*
 * Группа кнопок: смежные кнопки делят общий бордер, выглядят единым блоком.
 *
 * Поддерживаемые дочерние элементы:
 *   - .gc-btn (прямой дочерний)
 *   - .gc-dropdown > .gc-dropdown-toggle (дропдаун внутри группы)
 *
 * Важно: не оборачивай кнопки в span-тултипы.
 *   CSS-only (data-tooltip) обрезается overflow:auto/hidden родителей.
 *   Используй gc-widget-tip + data-tip прямо на кнопке.
 *
 * Размер: 32×32px — Figma btns/icon md / btns/bordered в списках.
 */

.gc-btn-group {
    display: inline-flex;
    align-items: stretch;
}

/* Сброс размера и скруглений для всех кнопок в группе */
.gc-btn-group > .gc-btn,
.gc-btn-group > .gc-dropdown > .gc-dropdown-toggle {
    width: var(--gc-dropdown-icon-toggle-size-sm);
    height: var(--gc-dropdown-icon-toggle-size-sm);
    min-width: var(--gc-dropdown-icon-toggle-size-sm);
    min-height: var(--gc-dropdown-icon-toggle-size-sm);
    padding: 0;
    border-radius: 0;
    flex-shrink: 0;
}

/* Смежная граница: -1px убирает дублирующийся бордер между кнопками */
.gc-btn-group > * + * {
    margin-left: -1px;
}

/*
 * Hover/focus поднимает кнопку над соседом — иначе правый бордер
 * всегда перекрывает общий стык (левый «без ховера разделителя»).
 */
.gc-btn-group > .gc-btn:is(:hover, :focus-visible, :active, [aria-expanded="true"]),
.gc-btn-group > .gc-dropdown:is(:hover, :focus-within) > .gc-dropdown-toggle,
.gc-btn-group > .gc-dropdown > .gc-dropdown-toggle[aria-expanded="true"] {
    position: relative;
    z-index: 1;
}

/* Первый: скругление слева */
.gc-btn-group > .gc-btn:first-child {
    border-radius: var(--gc-btn-radius) 0 0 var(--gc-btn-radius);
}
.gc-btn-group > .gc-dropdown:first-child > .gc-dropdown-toggle {
    border-radius: var(--gc-btn-radius) 0 0 var(--gc-btn-radius);
}

/* Последний: скругление справа */
.gc-btn-group > .gc-btn:last-child {
    border-radius: 0 var(--gc-btn-radius) var(--gc-btn-radius) 0;
}
.gc-btn-group > .gc-dropdown:last-child > .gc-dropdown-toggle {
    border-radius: 0 var(--gc-btn-radius) var(--gc-btn-radius) 0;
}

/* Одиночный: полное скругление */
.gc-btn-group > .gc-btn:only-child {
    border-radius: var(--gc-btn-radius);
}
.gc-btn-group > .gc-dropdown:only-child > .gc-dropdown-toggle {
    border-radius: var(--gc-btn-radius);
}

/* Icon-toggle в группе — md (8px), как .gc-dropdown-toggle-icon вне группы; не pill CTA */
.gc-btn-group > .gc-dropdown:first-child > .gc-dropdown-toggle.gc-dropdown-toggle-icon {
    border-radius: var(--gc-dropdown-icon-toggle-radius) 0 0 var(--gc-dropdown-icon-toggle-radius);
}
.gc-btn-group > .gc-dropdown:last-child > .gc-dropdown-toggle.gc-dropdown-toggle-icon {
    border-radius: 0 var(--gc-dropdown-icon-toggle-radius) var(--gc-dropdown-icon-toggle-radius) 0;
}
.gc-btn-group > .gc-dropdown:only-child > .gc-dropdown-toggle.gc-dropdown-toggle-icon {
    border-radius: var(--gc-dropdown-icon-toggle-radius);
}
.gc-btn-group > .gc-btn.gc-btn-icon-sm:first-child,
.gc-btn-group > .gc-btn.gc-btn-icon-xs:first-child {
    border-radius: var(--gc-btn-icon-radius) 0 0 var(--gc-btn-icon-radius);
}
.gc-btn-group > .gc-btn.gc-btn-icon-sm:last-child,
.gc-btn-group > .gc-btn.gc-btn-icon-xs:last-child {
    border-radius: 0 var(--gc-btn-icon-radius) var(--gc-btn-icon-radius) 0;
}
.gc-btn-group > .gc-btn.gc-btn-icon-sm:only-child,
.gc-btn-group > .gc-btn.gc-btn-icon-xs:only-child {
    border-radius: var(--gc-btn-icon-radius);
}

/* Primary в группе теряет акцентный цвет → bordered стиль как у соседей.
   Matching secondary bordered: Surface/Primary + Border/Subtle (не legacy panel/control). */
.gc-btn-group .gc-btn-primary {
    background: var(--surface-primary);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.gc-btn-group .gc-btn-primary:hover {
    background: var(--gc-btn-secondary-hover-bg);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

@media (max-width: 991.98px), (hover: none), (pointer: coarse) {
    .gc-btn-primary:hover:not(:active):not(:disabled):not([disabled]),
    .gc-btn-black:hover:not(:active):not(:disabled):not([disabled]),
    html.gc-touch-scrolling .gc-btn-primary:is(:hover, :active):not(:disabled):not([disabled]),
    html.gc-touch-scrolling .gc-btn-black:is(:hover, :active):not(:disabled):not([disabled]) {
        background-color: var(--gc-btn-primary-bg);
        background-image: none;
        opacity: 1;
    }

    .gc-btn-secondary:hover:not(:active),
    .gc-btn-subtle:hover:not(:active),
    html.gc-touch-scrolling .gc-btn-secondary:is(:hover, :active),
    html.gc-touch-scrolling .gc-btn-subtle:is(:hover, :active) {
        background-color: var(--gc-btn-secondary-bg);
        box-shadow: none;
    }

    .gc-btn-ghost:hover:not(:active),
    .gc-btn-text:hover:not(:active),
    .gc-btn-link:hover:not(:active),
    html.gc-touch-scrolling .gc-btn-ghost:is(:hover, :active),
    html.gc-touch-scrolling .gc-btn-text:is(:hover, :active),
    html.gc-touch-scrolling .gc-btn-link:is(:hover, :active) {
        background-color: transparent;
        opacity: 1;
    }

    .gc-btn-outline:hover:not(:active),
    .gc-btn-bordered:hover:not(:active),
    html.gc-touch-scrolling .gc-btn-outline:is(:hover, :active),
    html.gc-touch-scrolling .gc-btn-bordered:is(:hover, :active) {
        background-color: var(--surface-primary);
        box-shadow: var(--gc-btn-elevation), var(--gc-btn-hairline);
    }

    .gc-btn-group .gc-btn-primary:hover:not(:active),
    html.gc-touch-scrolling .gc-btn-group .gc-btn-primary:is(:hover, :active) {
        background: var(--surface-primary);
    }

    html.gc-touch-scrolling .gc-btn-accent:is(:hover, :active) {
        background-color: var(--accent-link);
        border-color: var(--accent-link);
        opacity: 1;
    }

    html.gc-touch-scrolling .gc-btn-danger:is(:hover, :active),
    html.gc-touch-scrolling .gc-btn-invalid:is(:hover, :active) {
        background-color: var(--danger-color);
        border-color: var(--danger-color);
        opacity: 1;
    }

    html.gc-touch-scrolling .gc-btn-success:is(:hover, :active),
    html.gc-touch-scrolling .gc-btn-valid:is(:hover, :active) {
        background-color: var(--success-color);
        border-color: var(--success-color);
        opacity: 1;
    }

    html.gc-touch-scrolling .gc-btn-warning:is(:hover, :active) {
        background-color: var(--warning-color);
        border-color: var(--warning-color);
        opacity: 1;
    }

    html.gc-touch-scrolling .gc-btn-ghost.gc-btn-danger:is(:hover, :active),
    html.gc-touch-scrolling .gc-btn-text.gc-btn-danger:is(:hover, :active) {
        background-color: transparent;
    }
}