:root {
    /* Text colors */
    --color-text-black: #222222;
    --color-text-primary: #004976;
    --color-text-secondary: #0065A3;
    --color-text-white:#fff;
  
    /* Branding colors */
    --color-primary: #004976;
    --color-secondary: #0065A3;
    --color-primary-alt: #53A7D9;
    --color-secondary-alt: #A5CADF;
  
    /* Light versions of the branding colors */
    --color-primary-light: #E4ECF2;
    --color-secondary-light: #E4ECF2;
  
    /* Error */
    --color-error: #A30005;
    --color-error-light: #FCEBE8;
    --color-error-alt: #E4797C;
  
    /* Success */
    --color-success: #0B5F26;
    --color-success-light: #E6F7F0;
  
    /* Warning */
    --color-warning: #F7AD41;
    --color-warning-light: #FEF7EC;
  
    /* Orange */
    --color-orange: #EE7411;
    --color-orange-light: #FFF3E9;
  
    /* Gray */
    --color-gray-light: #F6F6F6;
    --color-gray-alt: #A6ADB4;
  }


  
  
/* Button Primary Styles */
.button-primary {
    background-color: var(--color-primary);
    color: var(--color-text-white);
/* padding: 0.5rem 1rem; */
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Button Primary Hover */
.button-primary:hover {
    background-color: var(--color-primary);
    color:var(--color-text-white);
    filter: brightness(95%);
}

/* active press‑down effect—BUT only if the button is NOT disabled */
.button-primary:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.14);
}

/* Button Primary Inactive */
.button-primary:disabled {
    background-color: var(--color-primary-light);
    color: var(--color-text-black);
    cursor: not-allowed;
    opacity: 0.9;
}


/* Button Primary Outline Styles */
.button-primary-outline {
    background-color: var(--color-text-white);
    color: var(--color-text-black);
/* padding: 0.5rem 1rem; */
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-primary-outline:hover {
    background-color: var(--color-primary-light);
    color: var(--color-text-black);
    border: 1px solid var(--color-primary);
    filter: brightness(95%);
}

/* active press‑down effect—BUT only if the button is NOT disabled */
.button-primary-outline:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.14);
  }


.button-primary-outline:disabled {
    background-color: var(--color-primary-light);
    color: var(--color-text-black);
    cursor: not-allowed;
    opacity: 0.8;
    box-shadow: none;
}


/* Button Primary Alt Styles */
.button-primary-alt {
    background-color: var(--color-primary-alt);
    color: var(--color-text-black);
/* padding: 0.5rem 1rem; */
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-primary-alt:hover {
    background-color: var(--color-primary-alt);
    color: var(--color-text-black);
    filter: brightness(95%);
}

/* active press‑down effect—BUT only if the button is NOT disabled */
.button-primary-alt:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.14);
  }

.button-primary-alt:disabled {
    background-color: var(--color-primary-light);
    color: var(--color-text-black);
    cursor: not-allowed;
    opacity: 0.8;
}


/* Button Secondary Styles */
.button-secondary {
    background-color: var(--color-secondary);
    color: var(--color-text-white);
/* padding: 0.5rem 1rem; */
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* active press‑down effect—BUT only if the button is NOT disabled */
.button-secondary:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.14);
  }

.button-secondary:disabled {
    background-color: var(--color-primary-light);
    color: var(--color-text-black);
    cursor: not-allowed;
    opacity: 0.8;
}


/* Button Secondary Alt Styles */
.button-secondary-alt {
    background-color: var(--color-secondary-alt);
    color: var(--color-text-black);
    /* padding: 0.5rem 1rem; */
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-secondary-alt:hover {
    background-color: var(--color-secondary-alt);
    filter: brightness(95%);
}

/* active press‑down effect—BUT only if the button is NOT disabled */
.button-secondary-alt:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.14);
  }

.button-secondary-alt:disabled {
    background-color: var(--color-primary-light);
    color: var(--color-text-black);
    cursor: not-allowed;
    opacity: 0.8;
}


/* Button Error Styles */
.button-error {
    background-color: var(--color-error);
    color: var(--color-text-white);
/* padding: 0.5rem 1rem; */
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-error:hover {
    background-color: var(--color-error);
    filter: brightness(95%);
}

/* active press‑down effect—BUT only if the button is NOT disabled */
.button-error:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.14);
  }

.button-error:disabled {
    background-color: var(--color-error);
    color: var(--color-text-white);
    cursor: not-allowed;
    opacity: .85;
}


/* Button Error Outline Styles */
.button-error-outline {
    background-color: var(--color-text-white);
    color: var(--color-error);
/* padding: 0.5rem 1rem; */
    border: solid 1px var(--color-error);
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-error-outline:hover {
    background-color: var(--color-text-white);
    filter: brightness(95%);
}

/* active press‑down effect—BUT only if the button is NOT disabled */
.button-error-outline:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.14);
  }

.button-error-outline:disabled {
    background-color: var(--color-error);
    color: var(--color-text-white);
    cursor: not-allowed;
    opacity: 0.6;
}


/* Button Error Styles */
.button-error-alt {
    background-color: var(--color-error-alt);
    color: var(--color-text-black);
/* padding: 0.5rem 1rem; */
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-error-alt:hover {
    background-color: var(--color-error-alt);
    filter: brightness(95%);
}

/* active press‑down effect—BUT only if the button is NOT disabled */
.button-error-alt:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.14);
  }

.button-error-alt:disabled {
    background-color: var(--color-error-alt);
    color: var(--color-text-white);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Button Success Styles */
.button-success {
    background-color: var(--color-success);
    color: var(--color-text-white);
/* padding: 0.5rem 1rem; */
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-success:hover {
    background-color: var(--color-success);
    filter: brightness(95%);
}

/* active press‑down effect—BUT only if the button is NOT disabled */
.button-success:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.14);
  }

.button-success:disabled {
    background-color: var(--color-success);
    color: var(--color-text-white);
    cursor: not-allowed;
    opacity: .9;
}

/* Login page button */
.button-success.btn:hover {
    color: var(--color-text-white);
  }

/* Button Success Outline Styles */
.button-success-outline {
    background-color: var(--color-text-white);
    color: var(--color-success);
/* padding: 0.5rem 1rem; */
    border: 1px solid var(--color-success);
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-success-outline:hover {
    background-color: var(--color-success-light);
    filter: brightness(95%);
}

/* active press‑down effect—BUT only if the button is NOT disabled */
.button-success-outline:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.14);
  }

.button-success-outline:disabled {
    background-color: var(--color-success);
    color: var(--color-text-white);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Button Warning Styles */
.button-warning {
    background-color: var(--color-warning);
    color: var(--color-text-black);
/* padding: 0.5rem 1rem; */
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-warning:hover {
    background-color: var(--color-warning);
    filter: brightness(95%);
}

/* active press‑down effect—BUT only if the button is NOT disabled */
.button-warning:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.14);
  }

.button-warning:disabled {
    background-color: var(--color-warning);
    color: var(--color-text-black);
    cursor: not-allowed;
    opacity: 0.9;
}


/* Button Warning Outline Styles */
.button-warning-outline {
    background-color: var(--color-text-white);
    color: var(--color-text-black);
/* padding: 0.5rem 1rem; */
    border: 1px solid var(--color-warning);
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-warning-outline:hover {
    background-color: var(--color-warning-light);
    filter: brightness(95%);
}

/* active press‑down effect—BUT only if the button is NOT disabled */
.button-warning-outline:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.14);
  }

.button-warning-outline:disabled {
    background-color: var(--color-warning);
    color: var(--color-text-black);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Button Orange Styles */
.button-orange {
    font-family: Roboto, Verdana, Arial, Helvetica, sans-serif;
    background-color: var(--color-orange);
    color: var(--color-text-black);
/* padding: 0.5rem 1rem; */
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


.button-orange:hover {
    background-color: var(--color-orange);
    filter: brightness(95%);
}

/* active press‑down effect—BUT only if the button is NOT disabled */
.button-orange:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.14);
  }

.button-orange:disabled {
    background-color: var(--color-orange);
    color: var(--color-text-black);
    cursor: not-allowed;
    opacity: .95;
}


/* Button Orange Outline Styles */
.button-orange-outline {
    background-color: var(--color-text-white);
    color: var(--color-text-black);
/* padding: 0.5rem 1rem; */
    border: 2px solid var(--color-orange);
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-orange-outline:hover {
    color: var(--color-text-black);
    background-color: var(--color-orange-light);
    filter: brightness(95%);
}

/* active press‑down effect—BUT only if the button is NOT disabled */
.button-orange-outline:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.14);
  }

.button-orange-outline:disabled {
    background-color: var(--color-orange);
    color: var(--color-text-black);
    cursor: not-allowed;
    opacity: 0.8;
}

/* Button Dark Styles */
.button-dark {
    background-color: var(--color-text-black);
    color: var(--color-text-white);
/* padding: 0.5rem 1rem; */
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-dark:hover {
    background-color: var(--color-text-black);
    filter: brightness(95%);
}

/* active press‑down effect—BUT only if the button is NOT disabled */
.button-dark:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.14);
  }

.button-dark:disabled {
    background-color: var(--color-text-black);
    color: var(--color-text-white);
    cursor: not-allowed;
    opacity: 0.75;
}


/* Button Dark Outline Styles */
.button-dark-outline {
    background-color: var(--color-text-white);
    color: var(--color-text-black);
/* padding: 0.5rem 1rem; */
    border: 1px solid var(--color-text-black);
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-dark-outline:hover {
    background-color: var(--color-text-light);
    filter: brightness(95%);
}

/* active press‑down effect—BUT only if the button is NOT disabled */
.button-dark-outline:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.14);
  }

.button-dark-outline:disabled {
    background-color: var(--color-text-black);
    color: var(--color-text-white);
    cursor: not-allowed;
    opacity: 0.8;
}

/* Button Dark Alt Styles */
.button-dark-alt {
    background-color: var(--color-gray-alt);
    color: var(--color-text-black);
/* padding: 0.5rem 1rem; */
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-dark-alt:hover {
    background-color: var(--color-gray-alt);
    filter: brightness(95%);
}

/* active press‑down effect—BUT only if the button is NOT disabled */
.button-dark-alt:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.14);
  }

.button-dark-alt:disabled {
    background-color: var(--color-gray-alt);
    color: var(--color-text-white);
    cursor: not-allowed;
    opacity: 0.8;
}


.text-muted {color:#4c4c4c;}

.grey-1 {
color:#4c4c4c;
}


.grey-2 {
    color:#4c4c4c;
    }
    


.dark {
    color:#292929;
    }


.blue-secondary {
    color:#A5CADF;
    }



:focus {
    outline: 1px dashed var(--color-primary) !important;
}


.footer a.active {
    color:var(--color-primary-light) !important;
    text-decoration: underline;
}

.bg-orange {
background-color: var(--color-orange);
color: var(--color-text-black);

}


.alert {
    color: black;
    font-weight: bold;
}

.alert-danger {
    background-color: var(--color-error-light);
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

.myCartButton {
    color: var(--color-text-black) !important;
    background-color: var(--color-text-white) !important;
}

.myCartButton:hover {
    color: var(--color-text-black) !important;
}