.action-button {
    display: inline-flex;
    align-items: center;
    xgap: 8px; /* spacing between icon and text */
    background-color: #198754; /* Bootstrap success green */
    color: white;
    padding: 6px 12px;
    font-size: 16px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}




.btn-white,
.btn-green,
.btn-continue {
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.55rem 1.6rem;
    border: none;
    border-radius: 0.3rem; /* softer rounding */
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .btn-continue:hover {
        background-color: #4c6075; /* subtle hover color */
        background-color: #425468;
    }


.btn-white {
    background-color: white;
    color: #101010;
}


.btn-green {
    background-color: green;
    color: #ffffff;
}

.btn-continue {
    background-color: #5a6f88; /* soft slate-blue */
    color: #ffffff;
}

/* Custom muted gray */
.btn-dark {
    background-color: #5a6f88; /* muted slate-blue */
    color: white;
    font-size: 1.00rem;
    padding: 0.375rem 0.75rem;
    border: none;
    border-radius: 0.3rem;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}

    .btn-dark:hover {
        background-color: #4c6075;
    }



.custom-light-button {
    background-color: #f8f9fa; /* Bootstrap "light" */
    color: #212529; /* Standard text on light */
    font-size: 0.875rem; /* btn-sm = 14px */
    padding: 0.25rem 0.5rem; /* btn-sm padding */
    border: 1px solid #ced4da; /* subtle gray border */
    border-radius: 0.25rem; /* Bootstrap standard radius */
    margin-top: 0.25rem; /* mt-1 = 4px */
    cursor: pointer;
    text-align: center;
    display: inline-block;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

    .custom-light-button:hover {
        background-color: #e2e6ea;
        border-color: #dae0e5;
    }






.custom-warning-button {
    background-color: #ffc107;        /* Bootstrap warning yellow */
    color: #212529;                   /* Bootstrap default text on warning */
    font-size: 0.875rem;              /* btn-sm → 14px */
    padding: 0.25rem 0.5rem;          /* btn-sm padding */
    border: 1px solid #ffc107;        /* border to match background */
    border-radius: 0.25rem;           /* Bootstrap default rounding */
    margin-top: 0.25rem;              /* mt-1 = 0.25rem top margin */
    cursor: pointer;
    text-align: center;
    display: inline-block;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.custom-warning-button:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}