/* ---------- Override primary background color ------------ */
.bg-primary {
    background-color: #E8AC51 !important; /* New primary background color */
}

/* ---------- Override primary button colors ------------ */
.btn-primary {
    background-color: #f3a93a !important; /* Primary button color */
    color: #fff; /* White text is assumed to be readable on this background */
    border-color: #E8AC51; /* Same as background-color for a seamless look */
}

/* Override the hover state */
.btn-primary:hover {
    background-color: #D19E46 !important; /* Slightly darker shade for hover, derived from #E8AC51 */
    border: none!important;
}

/* Override the active/focus state */
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active {
    background-color: #BA8F3B !important; /* Even darker shade for active/focus, derived from #E8AC51 */
    box-shadow: none; /* Remove Bootstrap's default box-shadow on focus */
}

/* Override the disabled state */
.btn-primary:disabled, 
.btn-primary.disabled {
    background-color: #A38030 !important; /* Darkest shade for disabled, derived from #E8AC51 */
    color: rgba(255, 255, 255, 0.6); /* Slightly transparent white for disabled text */
}

/* --------------- End primary button ------------------*/



/* ---------- Override secondary background color ------------ */
.bg-secondary {
    background-color: #F6F3EB !important; /* New secondary background color */
}

/* ---------- Override secondary button colors ------------ */
.btn-secondary {
    background-color: #F6F3EB !important; /* Primary button color for secondary */
    color: #333; /* Dark text for readability on light background */
    border-color: #F6F3EB; /* Same as background-color for a seamless look */
}

/* Override the hover state */
.btn-secondary:hover {
    background-color: #E4E1DA !important; /* Slightly darker shade for hover, derived from #F6F3EB */
}

/* Override the active/focus state */
.btn-secondary:focus, 
.btn-secondary:active, 
.btn-secondary.active {
    background-color: #D2CFCA !important; /* Even darker shade for active/focus, derived from #F6F3EB */
    box-shadow: none; /* Remove Bootstrap's default box-shadow on focus */
}

/* Override the disabled state */
.btn-secondary:disabled, 
.btn-secondary.disabled {
    background-color: #C0BDB7 !important; /* Darkest shade for disabled, derived from #F6F3EB */
    color: rgba(51, 51, 51, 0.6); /* Slightly transparent dark text for disabled */
}

/* --------------- End secondary button ------------------*/

/* ---------- Override success button colors ------------ */
.btn-success {
    background-color: #268270 !important; /* Primary button color for success */
    color: #fff; /* White text for readability on this background */
    border-color: #268270; /* Same as background-color for a seamless look */
}

/* Override the hover state */
.btn-success:hover {
    background-color: #1F6D5C !important; /* Slightly darker shade for hover, derived from #268270 */
}

/* Override the active/focus state */
.btn-success:focus, 
.btn-success:active, 
.btn-success.active {
    background-color: #195D4E !important; /* Even darker shade for active/focus, derived from #268270 */
    box-shadow: none; /* Remove Bootstrap's default box-shadow on focus */
}

/* Override the disabled state */
.btn-success:disabled, 
.btn-success.disabled {
    background-color: #14504B !important; /* Darkest shade for disabled, derived from #268270 */
    color: rgba(255, 255, 255, 0.6); /* Slightly transparent white for disabled text */
}