@layer components {
    .nur-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--nur-space-2);
        min-height: var(--nur-tap);
        padding: 0 var(--nur-space-5);
        border: 2px solid transparent;
        border-radius: 999px;
        font-size: var(--nur-text-sm);
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s;
    }

    .nur-btn:active {
        transform: scale(0.98);
    }

    .nur-btn svg {
        width: 20px;
        height: 20px;
        flex: none;
    }

    .nur-btn--primary {
        background: var(--nur-primary);
        color: #fff;
    }

    .nur-btn--primary:hover {
        background: var(--nur-primary-strong);
    }

    .nur-btn--gold {
        background: var(--nur-gold-500);
        color: var(--nur-navy-900);
    }

    .nur-btn--gold:hover {
        background: var(--nur-gold-300);
    }

    .nur-btn--whatsapp {
        background: var(--nur-green-700);
        color: #fff;
    }

    .nur-btn--ghost {
        border-color: var(--nur-line);
        background: var(--nur-surface);
        color: var(--nur-primary);
    }

    .nur-btn--outline-light {
        border-color: rgba(255, 255, 255, 0.7);
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
    }

    .nur-btn--outline-light:hover {
        background: rgba(255, 255, 255, 0.18);
    }

    .nur-btn--block {
        display: flex;
        width: 100%;
    }

    .nur-btn[disabled] {
        opacity: 0.55;
        pointer-events: none;
    }

    .nur-icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--nur-tap);
        height: var(--nur-tap);
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--nur-primary-strong);
    }

    .nur-icon-btn svg {
        width: 26px;
        height: 26px;
    }
}