/*Your palette: #FECD07 (Primary / Accent) #DE1F26 (Critical / Alert) #1C1C1C (Text / Headings) #93A8AC (Muted / Secondary) #F3EFF5 (Background) #FFFFFF (Card / Surface)*/
:root {
    --brand-red: #DE1F26;
    --brand-red-hover: #c91b21;
    --brand-red-active: #b9151b;
    --brand-yellow: #FECD07;
    --brand-yellow-hover: #e6ba06;
    --brand-yellow-active: #d9b005;
    /*--brand-blue: #93A8AC;
    --brand-blue-hover: #7f9599;
    --brand-blue-active: #718a8e;*/
    --brand-blue: #6c757d;
    --brand-blue-hover: #5c636a;
    --brand-blue-active: #565e64;
    --brand-dark: #1C1C1C;
    --brand-dark-hover: #000000;
    --brand-dark-active: #000000;
    --brand-white: #FFFFFF;
    /* BUTTON TOKENS */
    --btn-radius: 12px;
    --btn-padding-y: 12px;
    --btn-padding-x: 16px;
    --btn-font-weight: 600;
    /* Focus Rings */
    --ring-red: rgba(222, 31, 38, .35);
    --ring-yellow: rgba(254, 205, 7, .35);
    --ring-blue: rgba(147, 168, 172, .35);
    --ring-dark: rgba(28, 28, 28, .25);
}


/* =========================================================   BASE BUTTON   ========================================================= */
.btn {
    border-radius: var(--btn-radius);
    /*padding: var(--btn-padding-y) var(--btn-padding-x);
    font-weight: var(--btn-font-weight);*/
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}

    .btn:hover {
        transform: translateY(-1px);
    }

    .btn:active {
        transform: translateY(0);
    }

    /* Remove default focus outline (we add our own ring) */
    .btn:focus {
        outline: 0;
    }

.btn-sm {
    border-radius: calc(var(--btn-radius) - 2px);
}

.btn-lg {
    border-radius: calc(var(--btn-radius) + 2px);
}


/* =========================================================   PRIMARY (Brand Red)   ========================================================= */
.btn-primary {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
    color: var(--brand-white);
}

    .btn-primary:hover {
        background-color: var(--brand-red-hover);
        border-color: var(--brand-red-hover);
    }

    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active {
        background-color: var(--brand-red-active);
        border-color: var(--brand-red-active);
    }

    .btn-primary:focus,
    .btn-primary:focus-visible {
        box-shadow: 0 0 0 .25rem var(--ring-red);
    }

    .btn-check:active + .btn-primary:focus, .btn-check:checked + .btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus, .show > .btn-primary.dropdown-toggle:focus {
        box-shadow: 0 0 0 .25rem var(--ring-red);
    }

    .btn-primary:disabled,
    .btn-primary.disabled {
        opacity: .65;
        background-color: var(--brand-red);
        border-color: var(--brand-red);
    } 

/* Outline Primary */
.btn-outline-primary {
    color: var(--brand-red);
    border-color: var(--brand-red);
    background-color: transparent;
}

    .btn-outline-primary:hover {
        background-color: var(--brand-red);
        border-color: var(--brand-red);
        color: var(--brand-white);
    }

    .btn-outline-primary:focus,
    .btn-outline-primary:active,
    .btn-outline-primary.active {
        background-color: var(--brand-red-active);
        border-color: var(--brand-red-active);
        color: var(--brand-white);
    }

    .btn-outline-primary:focus,
    .btn-outline-primary:focus-visible {
        box-shadow: 0 0 0 .25rem var(--ring-red);
    }

    .btn-check:active + .btn-outline-primary:focus, .btn-check:checked + .btn-outline-primary:focus, .btn-outline-primary.active:focus, .btn-outline-primary:active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
        box-shadow: 0 0 0 .25rem var(--ring-red);
    }

    .btn-outline-primary:disabled,
    .btn-outline-primary.disabled {
        opacity: .65;
        border-color: var(--brand-red);
        background-color: transparent;
    } 

/* =========================================================   SECONDARY (Brand Blue)   ========================================================= */
.btn-secondary {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: var(--brand-dark);
}

    .btn-secondary:hover {
        background-color: var(--brand-blue-hover);
        border-color: var(--brand-blue-hover);
    }

    .btn-secondary:focus,
    .btn-secondary:active,
    .btn-secondary.active {
        background-color: var(--brand-blue-active);
        border-color: var(--brand-blue-active);
    }

    .btn-secondary:focus,
    .btn-secondary:focus-visible {
        box-shadow: 0 0 0 .25rem var(--ring-blue);
    }

    .btn-check:active + .btn-secondary:focus, .btn-check:checked + .btn-secondary:focus, .btn-secondary.active:focus, .btn-secondary:active:focus, .show > .btn-secondary.dropdown-toggle:focus {
        box-shadow: 0 0 0 .25rem var(--ring-blue);
    }

    .btn-secondary:disabled,
    .btn-secondary.disabled {
        opacity: .65;
        background-color: var(--brand-blue);
        border-color: var(--brand-blue);
    } 

/* Outline Secondary */
.btn-outline-secondary {
    color: var(--brand-blue);
    border-color: var(--brand-blue);
    background-color: transparent;
}

    .btn-outline-secondary:hover {
        background-color: var(--brand-blue);
        border-color: var(--brand-blue);
        color: var(--brand-dark);
    }

    .btn-outline-secondary:focus,
    .btn-outline-secondary:active,
    .btn-outline-secondary.active {
        background-color: var(--brand-blue-active);
        border-color: var(--brand-blue-active);
        color: var(--brand-dark);
    }

    .btn-outline-secondary:focus,
    .btn-outline-secondary:focus-visible {
        box-shadow: 0 0 0 .25rem var(--ring-blue);
    }

    .btn-check:active + .btn-outline-secondary:focus, .btn-check:checked + .btn-outline-secondary:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary:active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus {
        box-shadow: 0 0 0 .25rem var(--ring-blue);
    }

    .btn-outline-secondary:disabled,
    .btn-outline-secondary.disabled {
        opacity: .65;
        border-color: var(--brand-blue);
        background-color: transparent;
    } 

/* =========================================================   WARNING (Brand Yellow)   ========================================================= */
.btn-warning {
    background-color: var(--brand-yellow);
    border-color: var(--brand-yellow);
    color: var(--brand-dark);
}

    .btn-warning:hover {
        background-color: var(--brand-yellow-hover);
        border-color: var(--brand-yellow-hover);
    }

    .btn-warning:focus,
    .btn-warning:active,
    .btn-warning.active {
        background-color: var(--brand-yellow-active);
        border-color: var(--brand-yellow-active);
    }

    .btn-warning:focus,
    .btn-warning:focus-visible {
        box-shadow: 0 0 0 .25rem var(--ring-yellow);
    }

    .btn-check:active + .btn-warning:focus, .btn-check:checked + .btn-warning:focus, .btn-warning.active:focus, .btn-warning:active:focus, .show > .btn-warning.dropdown-toggle:focus {
        box-shadow: 0 0 0 .25rem var(--ring-yellow);
    }

    .btn-warning:disabled,
    .btn-warning.disabled {
        opacity: .65;
        background-color: var(--brand-yellow);
        border-color: var(--brand-yellow);
    } 

/* Outline Warning */
.btn-outline-warning {
    border-color: var(--brand-yellow);
    color: var(--brand-dark);
    background-color: transparent;
}

    .btn-outline-warning:hover {
        background-color: var(--brand-yellow);
        border-color: var(--brand-yellow);
        color: var(--brand-dark);
    }

    .btn-outline-warning:focus,
    .btn-outline-warning:active,
    .btn-outline-warning.active {
        background-color: var(--brand-yellow-active);
        border-color: var(--brand-yellow-active);
        color: var(--brand-dark);
    }

    .btn-outline-warning:focus,
    .btn-outline-warning:focus-visible {
        box-shadow: 0 0 0 .25rem var(--ring-yellow);
    }

    .btn-check:active + .btn-outline-warning:focus, .btn-check:checked + .btn-outline-warning:focus, .btn-outline-warning.active:focus, .btn-outline-warning:active:focus, .show > .btn-outline-warning.dropdown-toggle:focus {
        box-shadow: 0 0 0 .25rem var(--ring-yellow);
    }

    .btn-outline-warning:disabled,
    .btn-outline-warning.disabled {
        opacity: .65;
        border-color: var(--brand-yellow);
        background-color: transparent;
    } 

/* ========================================================= DARK ========================================================= */
.btn-dark {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: var(--brand-white);
}

    .btn-dark:hover {
        background-color: var(--brand-dark-hover);
        border-color: var(--brand-dark-hover);
    }

    .btn-dark:focus,
    .btn-dark:active,
    .btn-dark.active {
        background-color: var(--brand-dark-active);
        border-color: var(--brand-dark-active);
    }

    .btn-dark:focus,
    .btn-dark:focus-visible {
        box-shadow: 0 0 0 .25rem var(--ring-dark);
    }

    .btn-check:active + .btn-dark:focus, .btn-check:checked + .btn-dark:focus, .btn-dark.active:focus, .btn-dark:active:focus, .show > .btn-dark.dropdown-toggle:focus {
        box-shadow: 0 0 0 .25rem var(--ring-dark);
    }

    .btn-dark:disabled,
    .btn-dark.disabled {
        opacity: .65;
        background-color: var(--brand-dark);
        border-color: var(--brand-dark);
    } 

/* Outline Dark */
.btn-outline-dark {
    border-color: var(--brand-dark);
    color: var(--brand-dark);
    background-color: transparent;
}

    .btn-outline-dark:hover {
        background-color: var(--brand-dark);
        border-color: var(--brand-dark);
        color: var(--brand-white);
    }

    .btn-outline-dark:focus,
    .btn-outline-dark:active,
    .btn-outline-dark.active {
        background-color: var(--brand-dark-active);
        border-color: var(--brand-dark-active);
        color: var(--brand-white);
    }

    .btn-outline-dark:focus,
    .btn-outline-dark:focus-visible {
        box-shadow: 0 0 0 .25rem var(--ring-dark);
    }

    .btn-check:active + .btn-outline-dark:focus, .btn-check:checked + .btn-outline-dark:focus, .btn-outline-dark.active:focus, .btn-outline-dark:active:focus, .show > .btn-outline-dark.dropdown-toggle:focus {
        box-shadow: 0 0 0 .25rem var(--ring-dark);
    }

    .btn-outline-dark:disabled,
    .btn-outline-dark.disabled {
        opacity: .65;
        border-color: var(--brand-dark);
        color: var(--brand-dark);
    } 


/* =========================================================   OPTIONAL: SOFT BUTTONS (Premium Style)   ========================================================= */
.btn-soft-primary {
    background-color: rgba(222,31,38,.10);
    border-color: rgba(222,31,38,.18);
    color: var(--brand-red);
}

    .btn-soft-primary:hover {
        background-color: rgba(222,31,38,.16);
    }

    .btn-soft-primary:focus,
    .btn-soft-primary:focus-visible {
        box-shadow: 0 0 0 .25rem var(--ring-red);
    }

    .btn-check:active + .btn-soft-primary:focus, .btn-check:checked + .btn-soft-primary:focus, .btn-soft-primary.active:focus, .btn-soft-primary:active:focus, .show > .btn-soft-primary.dropdown-toggle:focus {
        box-shadow: 0 0 0 .25rem var(--ring-red);
    }

    .btn-soft-primary:disabled,
    .btn-soft-primary.disabled {
        opacity: .65;
        background-color: rgba(222,31,38,.10);
        border-color: rgba(222,31,38,.18);
    } 

.btn-soft-secondary {
    background-color: rgba(147,168,172,.18);
    border-color: rgba(147,168,172,.28);
    color: var(--brand-dark);
}

    .btn-soft-secondary:focus,
    .btn-soft-secondary:focus-visible {
        box-shadow: 0 0 0 .25rem var(--ring-blue);
    }

    .btn-check:active + .btn-soft-secondary:focus, .btn-check:checked + .btn-soft-secondary:focus, .btn-soft-secondary.active:focus, .btn-soft-secondary:active:focus, .show > .btn-soft-secondary.dropdown-toggle:focus {
        box-shadow: 0 0 0 .25rem var(--ring-blue);
    }

    .btn-soft-secondary:disabled,
    .btn-soft-secondary.disabled {
        opacity: .65;
        background-color: rgba(147,168,172,.18);
        border-color: rgba(147,168,172,.28);
    } 

.btn-soft-warning {
    background-color: rgba(254,205,7,.20);
    border-color: rgba(254,205,7,.30);
    color: var(--brand-dark);
}

    .btn-soft-warning:focus,
    .btn-soft-warning:focus-visible {
        box-shadow: 0 0 0 .25rem var(--ring-yellow);
    }

    .btn-check:active + .btn-soft-warning:focus, .btn-check:checked + .btn-soft-warning:focus, .btn-soft-warning.active:focus, .btn-soft-warning:active:focus, .show > .btn-soft-warning.dropdown-toggle:focus {
        box-shadow: 0 0 0 .25rem var(--ring-yellow);
    }

    .btn-soft-warning:disabled,
    .btn-soft-warning.disabled {
        opacity: .65;
        background-color: rgba(254,205,7,.20);
        border-color: rgba(254,205,7,.30);
    } 



/* ===================================================== FORM CONTROL (Inputs, Textarea) ===================================================== */
.form-control {
    border-radius: 10px;
    border: 1px solid #dee2e6;
    padding: 10px 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .form-control:focus {
        border-color: var(--brand-red);
        box-shadow: 0 0 0 .25rem rgba(222,31,38,.25);
        outline: 0;
    }

    .form-control::placeholder {
        color: #93A8AC;
        opacity: 1;
    }

    .form-control:disabled,
    .form-control[readonly] {
        background-color: #F3EFF5;
        opacity: 1;
    }


/* ===================================================== FORM SELECT ===================================================== */
.form-select {
    border-radius: 10px;
    /*padding: 10px 14px;*/
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .form-select:focus {
        border-color: var(--brand-red);
        box-shadow: 0 0 0 .25rem rgba(222,31,38,.25);
        outline: 0;
    }


/* ===================================================== CHECKBOX & RADIO ===================================================== */
.form-check-input {
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

    .form-check-input:checked {
        background-color: var(--brand-red);
        border-color: var(--brand-red);
    }

    .form-check-input:focus {
        border-color: var(--brand-red);
        box-shadow: 0 0 0 .25rem rgba(222,31,38,.25);
        _box-shadow: 0 0 0 .25rem rgba(185, 21, 27, .5);
    }

    .form-check-input[type="radio"] {
        border-radius: 50%;
    }

/* ===================================================== SWITCH ===================================================== */
.form-switch .form-check-input:checked {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}

/* ===================================================== RANGE SLIDER ===================================================== */
.form-range::-webkit-slider-thumb {
    background-color: var(--brand-red);
}

.form-range::-moz-range-thumb {
    background-color: var(--brand-red);
}

.form-range::-webkit-slider-thumb:active {
    background-color: var(--brand-red-hover);
}

.form-range::-moz-range-thumb:active {
    background-color: var(--brand-red-hover);
}


/* ===================================================== VALIDATION STATES ===================================================== */
.is-valid,
.was-validated .form-control:valid {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 .25rem rgba(222,31,38,.15);
}

.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 .25rem rgba(222,31,38,.25);
}


/* ===================================================== LABELS ===================================================== */
.form-label {
    font-weight: 600;
    color: var(--brand-dark);
}

/* ===================================================== INPUT GROUP ===================================================== */
.input-group-text {
    background-color: #FFFFFF;
    border-radius: 10px;
}

.input-group .form-control:focus {
    z-index: 3;
}