/* /client/static/css/components.css */

/* --- Buttons --- */
/* Make selector more specific to override .nav-link styles */
/* Target both desktop and mobile views with high specificity */
.navbar-nav .nav-link.support-button {
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    border-radius: 100px;
    padding: 0.5rem 1.25rem; /* Use rem for consistent scaling */
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    padding: 10px 20px;
    text-decoration: none;
}

.btn-black {
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 10px 20px;
    text-decoration: none;
}

.btn-secondary {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
    padding: 8px 16px;
    display: block;
    margin: 20px auto;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}

.btn-secondary:hover {
    background-color: #E0A21D;
}