/* ============================================================
   XRechnungen – Buttons
   All solid-fill buttons use var(--btn-bg) / var(--btn-fg).
   No hardcoded colours — fully controlled via variables.css.
   ============================================================ */

/* ── Base button ─────────────────────────────────────────── */
.btn {
    display: inline-block; padding: 9px 16px;
    border: 1px solid var(--border); border-radius: 7px;
    background: var(--surface); color: var(--fg);
    cursor: pointer; font-size: 0.95em; font-weight: 500;
    text-decoration: none; transition: all .15s;
    min-height: 38px;
}
.btn:hover { border-color: var(--primary); color: var(--primary); }

/* ── Primary button (solid fill) ─────────────────────────── */
/* Uses --btn-bg / --btn-fg — guaranteed WCAG AA in all schemes
   and both light + dark mode. No theme-specific overrides needed. */
.btn.primary {
    background: var(--btn-bg);
    color: var(--btn-fg);
    border-color: var(--btn-bg);
}
.btn.primary:hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-bg-hover);
    color: var(--btn-fg);
}

/* ── Nav-auth button inherits from navigation.css ─────────── */
/* .nav-auth .btn is defined there, uses --btn-bg too. */

/* ── Interval switcher (billing interval toggle) ─────────── */
.interval-btn.active {
    background: var(--btn-bg);
    color: var(--btn-fg);
}

/* ── Popular badge on pricing cards ──────────────────────── */
.popular-badge {
    position: absolute;
    top: .8rem; right: .8rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: .72rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
}

/* ── Remove / destructive button ─────────────────────────── */
.btn-remove {
    border: none; background: transparent; color: var(--error);
    font-size: 1.1em; cursor: pointer; padding: 4px;
}

/* ── Layman-mode toggle ──────────────────────────────────── */
.btn-layman-toggle {
    font-size: 0.85em; padding: 7px 14px;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--muted); border-radius: 20px;
    white-space: nowrap; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0; align-self: center;
}
.btn-layman-toggle:hover,
.btn-layman-toggle.active {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    border-color: var(--primary); color: var(--primary);
}

/* ── Action row ──────────────────────────────────────────── */
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0; }