/* ============================================================================
   02-buttons.css — part 2 of 9 of the former main.css
   Button system and background utilities

   LOAD ORDER MATTERS. These files are linked in numeric order from
   shared_elements/main/main.html. They were split by position and never
   reordered, so the cascade is byte-for-byte what the single file produced.
   Moving a rule between them can change which declaration wins.
   ============================================================================ */
/*
______       _   _
| ___ \     | | | |
| |_/ /_   _| |_| |_ ___  _ __  ___
| ___ \ | | | __| __/ _ \| '_ \/ __|
| |_/ / |_| | |_| || (_) | | | \__ \
\____/ \__,_|\__|\__\___/|_| |_|___/
*/

/* User should never be able to click buttons that are disabled, so a global rule for this is acceptable */
.button-base:disabled, .button-base.disabled
{
    pointer-events: none !important;
    user-select: none !important;
    text-decoration: none !important;
    background-color: var(--ks-lightgrey) !important;
    color: var(--ks-grey) !important;
    box-shadow: 0px 0px 3px var(--ks-grey) !important;
}

.button-base
{
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    padding: 15px 30px;
    border-radius: 6px;
    box-shadow: 0px 0px 10px rgba(var(--eC-primary-lighter-rgb), 0.25);
    transition: all 0.3s ease 0s;
    border: none;
    cursor: pointer;
}
.button-base::after {
    color: inherit;
}

.btn-group .button-base:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group .button-base:nth-child(2) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.button-ghost
{
    background-color: transparent;
    color: var(--eC-text-primary);
    box-shadow: 0px 0px 10px rgba(var(--eC-primary-darker-rgb), 0.2);
}

.button-ghost:active
{
    text-decoration: underline;
}

.button-ghost:hover
{
    background-color: var(--eC-primary);
    color: var(--ks-white);
    text-shadow: 0px 0px 1px var(--eC-primary-lighter);
}

.button-ghost:disabled
{
    background-color: transparent;
}

.button-success
{
    background-color: var(--ks-green);
    box-shadow: 0px 0px 10px var(--ks-green) !important;
    color: var(--ks-white);
}

.button-success:hover
{
    background-color: var(--ks-white);
    color: var(--ks-green);
}

.button-success:active
{
    text-shadow: 0px 0px 1px var(--ks-green);
}

.button-info{
    box-shadow: 0px 0px 10px var(--ks-info-blue-fade);
    background-color: var(--ks-info-blue);
    color: var(--ks-white);
}

.button-info:hover {
    background-color: var(--ks-info);
    color: var(--ks-info-blue);
}

.button-info:active
{
    text-shadow: 0px 0px 1px var(--ks-info-blue);
}

.hov-primary {
    color: var(--eC-primary);
}
.hov-primary:hover {
    color: var(--eC-black);
}

.button-primary {
    box-shadow: 0px 0px 10px rgba(var(--eC-primary-darker-rgb), 0.2);
    background-color: var(--eC-primary);
    color: var(--ks-white);
}

.button-primary:hover, .button-primary:hover::after {
    background-color: var(--ks-white) !important;
    color: var(--eC-primary);
}
.button-alt-hover:hover {
    color: var(--ks-black) !important;
}

.button-primary:active
{
    text-shadow: 0px 0px 1px var(--eC-primary-darker);
}

.button-primary-glow {
    box-shadow: 0px 0px 10px var(--eC-primary) !important;
}

.button-danger  {
    background-color: var(--ks-danger);
    color: var(--ks-white);
    box-shadow: 0px 0px 2px 0px var(--ks-black-2);
}

.button-danger:hover {
    color: var(--eC-black);
    background-color: var(--ks-softer-red);
    box-shadow: 0px 0px 10px var(--ks-error-red);
}

.button-danger:active {
    text-shadow: 0px 0px 1px var(--ks-danger);
}

.button-danger:disabled {
    opacity: 0.8;
}

.button-white
{
    background-color: var(--ks-white);
    color: var(--ks-black);
    box-shadow: none;
}

.button-warning
{
    background-color: var(--ks-yellow);
    color: var(--ks-white);
    box-shadow: 0px 0px 10px var(--ks-light-yellow);
}

.button-warning:hover
{
    color: var(--ks-yellow);
    background-color: var(--ks-light-yellow);
    box-shadow: 0px 0px 10px var(--ks-yellow);
}

.button-warning:active
{
    text-shadow: 0px 0px 1px var(--ks-yellow);
}

.button-background {
    box-shadow: none !important;
    background-color: inherit !important;
    color: var(--eC-black) !important;
}
.button-background:hover {
    background-color: inherit;
    color: var(--eC-black);
}

.no-border {
    border: none !important;
}

.error-container-2 {
    color:var(--ks-error-red);
    pointer-events: none;
}
.error-container-2 .error-field {
    margin: 0 !important;
}
.error-container-2:has(label){
    margin-bottom: 1.5rem;
}

.prev-step-button
{
    display: inline-block;
    border-radius: 6px;
    text-align: center;
    padding: 0;
    vertical-align: middle;
    background-color: transparent;
    border-color: transparent;
    text-decoration: none;
    color: var(--ks-black-2);
    line-height: 19px;
}
.prev-step-button:hover {
    color: var(--eC-primary);
    text-shadow: 0px 0px 0px var(--eC-primary);
}

.button-slim
{
    padding: 10px 20px;
}

.button-slimmer
{
    padding: 6px 20px;
    font-size: 0.8rem;
}

.btn-secondary
{
    color: var(--bs-white) !important;
    background-color: var(--eC-text-secondary) !important;
    border-color: var(--eC-text-secondary) !important;
    display: inline-block;
    border-radius: 6px;
    text-align: center;
    padding: 12px 26px;
    vertical-align: bottom;
}

/*
______            _                                   _
| ___ \          | |                                 | |
| |_/ / __ _  ___| | ____ _ _ __ ___  _   _ _ __   __| |___
| ___ \/ _` |/ __| |/ / _` | '__/ _ \| | | | '_ \ / _` / __|
| |_/ / (_| | (__|   < (_| | | | (_) | |_| | | | | (_| \__ \
\____/ \__,_|\___|_|\_\__, |_|  \___/ \__,_|_| |_|\__,_|___/
                       __/ |
                      |___/

*/

.bg-white {
    background-color: var(--ks-white) !important;
}

.bg-grey {
    background-color: var(--ks-grey) !important;
}

.bg-disabled-grey {
    background-color: var(--ks-disabled) !important;
}

.bg-red {
    background-color: var(--ks-danger) !important;
}

.bg-background {
    background-color: var(--ks-background-primary) !important;
}

.bg-blue {
    background-color: var(--eC-primary) !important;
}

.br-3px
{
    border-radius: 3px !important;
}

.br-6px
{
    border-radius: 6px !important;
}

.min-vh-70 {
    min-height: 70vh !important;
}

.h-90 {
    height: 90% !important;
}

/* Selection panes */

.bg-info-light {
    background-color: var(--ks-info) !important;
}