.association-membership-shell {
    --association-action-navy: #0f172a;
    --association-action-blue: #1d4ed8;
    --association-action-green: #047857;
    --association-action-red: #991b1b;
    --association-action-white: #ffffff;
    --association-action-focus: #f59e0b;
}

.association-action-button,
.association-secondary-action {
    align-items: center;
    border-radius: 0.875rem;
    border-style: solid;
    border-width: 2px;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.0625rem;
    font-weight: 900;
    justify-content: center;
    line-height: 1.35;
    min-height: 3.5rem;
    padding: 0.875rem 1.5rem;
    text-align: center;
    text-decoration: none;
    transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.association-action-button {
    background-color: var(--association-action-navy) !important;
    border-color: var(--association-action-navy) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2);
    color: var(--association-action-white) !important;
}

.association-action-button--review {
    background-color: var(--association-action-blue) !important;
    border-color: var(--association-action-blue) !important;
}

.association-action-button--approve {
    background-color: var(--association-action-green) !important;
    border-color: var(--association-action-green) !important;
}

.association-action-button--reject {
    background-color: var(--association-action-red) !important;
    border-color: var(--association-action-red) !important;
}

.association-secondary-action {
    background-color: var(--association-action-white) !important;
    border-color: #475569 !important;
    color: var(--association-action-navy) !important;
}

.association-action-button:hover,
.association-secondary-action:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.association-action-button:focus-visible,
.association-secondary-action:focus-visible {
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.4);
    outline: 3px solid var(--association-action-focus);
    outline-offset: 2px;
}

@media (max-width: 639px) {
    .association-action-button,
    .association-secondary-action {
        font-size: 1rem;
        min-height: 3.75rem;
        width: 100%;
    }
}
