@charset "UTF-8";
/* ============================================================
   FORCE OVERRIDE: BOOTSTRAP 5.3 COLOR SCHEME
   Primary Navy:    #00275E
   Primary Red:     #CD0505
   ============================================================ */

/* ------------------------------------------------------------
   1. ROOT VARIABLES - Complete Bootstrap variable override
   ------------------------------------------------------------ */
:root {
    /* Brand Colors from Logo */
    --brand-navy: #00275E;
    --brand-red: #CD0505;
    --brand-red-dark: #a30404;
    --brand-red-rgb: 205, 5, 5;
    --brand-navy-rgb: 0, 39, 94;
    /* Bootstrap Core Overrides */
    --bs-primary: var(--brand-red);
    --bs-primary-rgb: var(--brand-red-rgb);
    --bs-secondary: #5a6e7c;
    --bs-secondary-rgb: 90, 110, 124;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: var(--brand-red);
    --bs-danger-rgb: var(--brand-red-rgb);
    --bs-dark: var(--brand-navy);
    --bs-dark-rgb: var(--brand-navy-rgb);
    --bs-light: #f8f9fa;
    --bs-body-color: #2c3e50;
    --bs-body-bg: #ffffff;
    /* Link Colors */
    --bs-link-color: var(--brand-navy);
    --bs-link-color-rgb: var(--brand-navy-rgb);
    --bs-link-hover-color: var(--brand-red);
    --bs-link-hover-color-rgb: var(--brand-red-rgb);
    /* Theme Colors */
    --bs-body-color: #2c3e50;
    --bs-body-bg: #f8f9fa;
    --bs-border-color: #dee2e6;
    /* Component Specific */
    --bs-card-border-color: rgba(0,0,0,0.08);
    --bs-card-cap-bg: rgba(0,39,94,0.03);
    --bs-dropdown-link-hover-bg: rgba(205,5,5,0.08);
    --bs-dropdown-link-active-bg: var(--brand-red);
    --bs-pagination-color: var(--brand-navy);
    --bs-pagination-hover-color: var(--brand-red);
    --bs-pagination-active-bg: var(--brand-red);
    --bs-pagination-active-border-color: var(--brand-red);
    --bs-nav-tabs-link-active-color: var(--brand-red);
    --bs-nav-pills-link-active-bg: var(--brand-red);
    --bs-list-group-active-bg: var(--brand-red);
    --bs-list-group-active-border-color: var(--brand-red);
    --bs-input-focus-border-color: var(--brand-red);
    --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(205,5,5,0.25);
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem rgba(205,5,5,0.25);
    --bs-progress-bar-bg: var(--brand-red);
    --bs-table-hover-bg: rgba(205,5,5,0.05);
    --bs-table-striped-bg: rgba(0,39,94,0.02);
}

/* ------------------------------------------------------------
   2. GLOBAL ELEMENT OVERRIDES (Highest Specificity)
   ------------------------------------------------------------ */
body {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

/* All headings forced to Navy */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    color: var(--brand-navy) !important;
}

/* Paragraphs and body text */
p, .text-body, .lead {
    color: #2c3e50;
}

/* ------------------------------------------------------------
   3. BOOTSTRAP TEXT COLOR UTILITIES - Force override
   ------------------------------------------------------------ */
.text-primary {
    color: var(--brand-red) !important;
}

.text-secondary {
    color: #5a6e7c !important;
}

.text-success {
    color: #198754 !important;
}

.text-danger {
    color: var(--brand-red) !important;
}

.text-warning {
    color: #ffc107 !important;
}

.text-info {
    color: #0dcaf0 !important;
}

.text-dark {
    color: var(--brand-navy) !important;
}

.text-light {
    color: #f8f9fa !important;
}

.text-body {
    color: #2c3e50 !important;
}

.text-muted {
    color: #6c757d !important;
}

.text-white {
    color: #ffffff !important;
}

.text-black {
    color: #000000 !important;
}

.text-black-50 {
    color: rgba(0,0,0,0.5) !important;
}

.text-white-50 {
    color: rgba(255,255,255,0.5) !important;
}

/* ------------------------------------------------------------
   4. BACKGROUND COLOR UTILITIES - Force override
   ------------------------------------------------------------ */
.bg-primary {
    background-color: var(--brand-red) !important;
}

.bg-secondary {
    background-color: #5a6e7c !important;
}

.bg-success {
    background-color: #198754 !important;
}

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

.bg-warning {
    background-color: #ffc107 !important;
}

.bg-info {
    background-color: #0dcaf0 !important;
}

.bg-dark {
    background-color: var(--brand-navy) !important;
}

.bg-light {
    background-color: #f8f9fa !important;
}

.bg-white {
    background-color: #ffffff !important;
}

.bg-transparent {
    background-color: transparent !important;
}

/* ------------------------------------------------------------
   5. BORDER COLOR UTILITIES
   ------------------------------------------------------------ */
.border-primary {
    border-color: var(--brand-red) !important;
}

.border-secondary {
    border-color: #5a6e7c !important;
}

.border-success {
    border-color: #198754 !important;
}

.border-danger {
    border-color: var(--brand-red) !important;
}

.border-warning {
    border-color: #ffc107 !important;
}

.border-info {
    border-color: #0dcaf0 !important;
}

.border-dark {
    border-color: var(--brand-navy) !important;
}

.border-light {
    border-color: #f8f9fa !important;
}

/* ------------------------------------------------------------
   6. BUTTONS - All variants forced
   ------------------------------------------------------------ */
.btn-primary {
    --bs-btn-bg: var(--brand-red);
    --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-bg: var(--brand-red-dark);
    --bs-btn-hover-border-color: var(--brand-red-dark);
    --bs-btn-active-bg: var(--brand-red-dark);
    --bs-btn-active-border-color: var(--brand-red-dark);
    --bs-btn-disabled-bg: var(--brand-red);
    --bs-btn-disabled-border-color: var(--brand-red);
    background-color: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

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

.btn-outline-primary {
    --bs-btn-color: var(--brand-red);
    --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-bg: var(--brand-red);
    --bs-btn-hover-border-color: var(--brand-red);
    --bs-btn-active-bg: var(--brand-red);
    --bs-btn-active-border-color: var(--brand-red);
    color: var(--brand-red);
    border-color: var(--brand-red);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active {
        background-color: var(--brand-red) !important;
        border-color: var(--brand-red) !important;
        color: #fff !important;
    }

.btn-dark {
    --bs-btn-bg: var(--brand-navy);
    --bs-btn-border-color: var(--brand-navy);
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
}

    .btn-dark:hover {
        background-color: #001d47 !important;
        border-color: #001d47 !important;
    }

.btn-outline-dark {
    --bs-btn-color: var(--brand-navy);
    --bs-btn-border-color: var(--brand-navy);
    --bs-btn-hover-bg: var(--brand-navy);
    --bs-btn-hover-border-color: var(--brand-navy);
    color: var(--brand-navy);
    border-color: var(--brand-navy);
}

    .btn-outline-dark:hover {
        background-color: var(--brand-navy) !important;
        border-color: var(--brand-navy) !important;
        color: #fff !important;
    }

/* Danger buttons use red scheme */
.btn-danger {
    --bs-btn-bg: var(--brand-red);
    --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-bg: var(--brand-red-dark);
    --bs-btn-hover-border-color: var(--brand-red-dark);
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}

/* ------------------------------------------------------------
   7. NAVBAR & NAVIGATION
   ------------------------------------------------------------ */
.navbar-dark .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link {
    color: var(--brand-navy);
}

    .navbar-dark .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-dark .navbar-nav .nav-link:focus,
    .navbar-light .navbar-nav .nav-link:focus {
        color: var(--brand-red);
    }

.navbar .nav-link.active,
.navbar .nav-link.show {
    color: var(--brand-red) !important;
}

.nav-tabs .nav-link {
    color: var(--brand-navy);
}

    .nav-tabs .nav-link:hover {
        color: var(--brand-red);
        border-color: var(--brand-red) transparent transparent;
    }

    .nav-tabs .nav-link.active {
        color: var(--brand-red) !important;
        border-bottom-color: var(--brand-red) !important;
    }

.nav-pills .nav-link {
    color: var(--brand-navy);
}

    .nav-pills .nav-link.active,
    .nav-pills .show > .nav-link {
        background-color: var(--brand-red) !important;
    }

    .nav-pills .nav-link:hover:not(.active) {
        color: var(--brand-red);
    }

/* ------------------------------------------------------------
   8. LINKS
   ------------------------------------------------------------ */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--brand-navy);
}

    a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
    a:not(.btn):not(.nav-link):not(.dropdown-item):focus {
        color: var(--brand-red);
    }

a.text-primary:hover,
a.text-primary:focus {
    color: var(--brand-red-dark) !important;
}

a.text-dark:hover,
a.text-dark:focus {
    color: var(--brand-red) !important;
}

/* ------------------------------------------------------------
   9. CARDS
   ------------------------------------------------------------ */
.card {
    border-color: rgba(0,0,0,0.08);
}

.card-header,
.card-footer {
    background-color: rgba(0,39,94,0.03);
    border-color: rgba(0,0,0,0.08);
}

.card-title {
    color: var(--brand-navy);
}

.card-link {
    color: var(--brand-navy);
}

    .card-link:hover {
        color: var(--brand-red);
    }

/* ------------------------------------------------------------
   10. BADGES
   ------------------------------------------------------------ */
.badge.bg-primary {
    background-color: var(--brand-red) !important;
}

.badge.bg-dark {
    background-color: var(--brand-navy) !important;
}

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

.badge.text-bg-primary {
    background-color: var(--brand-red) !important;
}

.badge.text-bg-dark {
    background-color: var(--brand-navy) !important;
}

/* ------------------------------------------------------------
   11. PAGINATION
   ------------------------------------------------------------ */
.page-link {
    color: var(--brand-navy);
}

    .page-link:hover {
        color: var(--brand-red);
        border-color: var(--brand-red);
    }

.page-item.active .page-link {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}

.page-item.disabled .page-link {
    color: #6c757d;
}

/* ------------------------------------------------------------
   12. FORMS & INPUTS
   ------------------------------------------------------------ */
.form-control:focus,
.form-select:focus,
.input-group-text:focus {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 0.2rem rgba(205,5,5,0.25);
}

.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 0.2rem rgba(205,5,5,0.25);
}

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

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

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

/* ------------------------------------------------------------
   13. DROPDOWNS
   ------------------------------------------------------------ */
.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--brand-red);
}

.dropdown-item:hover:not(.active) {
    background-color: rgba(205,5,5,0.08);
    color: var(--brand-red);
}

.dropdown-header {
    color: var(--brand-navy);
}

/* ------------------------------------------------------------
   14. MODALS
   ------------------------------------------------------------ */
.modal-header {
    border-bottom-color: rgba(0,0,0,0.08);
}

.modal-footer {
    border-top-color: rgba(0,0,0,0.08);
}

.btn-close:focus {
    box-shadow: 0 0 0 0.2rem rgba(205,5,5,0.25);
}

/* ------------------------------------------------------------
   15. TABLES
   ------------------------------------------------------------ */
.table-primary {
    --bs-table-bg: rgba(205,5,5,0.1);
    --bs-table-color: var(--brand-navy);
}

    .table-primary th,
    .table-primary td {
        color: var(--brand-navy);
    }

.table > :not(caption) > tr > th {
    color: var(--brand-navy);
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(205,5,5,0.05);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0,39,94,0.02);
}

/* ------------------------------------------------------------
   16. LIST GROUPS
   ------------------------------------------------------------ */
.list-group-item.active {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}

.list-group-item-action:hover:not(.active) {
    background-color: rgba(205,5,5,0.05);
    color: var(--brand-red);
}

.list-group-item-primary {
    background-color: rgba(205,5,5,0.1);
    color: var(--brand-navy);
}

/* ------------------------------------------------------------
   17. PROGRESS BARS
   ------------------------------------------------------------ */
.progress-bar {
    background-color: var(--brand-red);
}

/* ------------------------------------------------------------
   18. ALERTS
   ------------------------------------------------------------ */
.alert-primary {
    background-color: rgba(205,5,5,0.1);
    border-color: rgba(205,5,5,0.2);
    color: var(--brand-navy);
}

    .alert-primary .alert-link {
        color: var(--brand-red);
    }

.alert-danger {
    background-color: rgba(205,5,5,0.1);
    border-color: rgba(205,5,5,0.2);
    color: var(--brand-red);
}

/* ------------------------------------------------------------
   19. TOASTS
   ------------------------------------------------------------ */
.toast-header {
    background-color: rgba(0,39,94,0.03);
    color: var(--brand-navy);
}

    .toast-header .btn-close {
        color: var(--brand-navy);
    }

/* ------------------------------------------------------------
   20. SPINNERS & LOADERS
   ------------------------------------------------------------ */
.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--brand-red) !important;
}

.spinner-border.text-dark,
.spinner-grow.text-dark {
    color: var(--brand-navy) !important;
}

/* ------------------------------------------------------------
   21. TOOLTIPS & POPOVERS
   ------------------------------------------------------------ */
.tooltip-inner {
    background-color: var(--brand-navy);
}

.bs-tooltip-auto .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--brand-navy);
}

.popover-header {
    background-color: rgba(0,39,94,0.05);
    color: var(--brand-navy);
    border-bottom-color: rgba(0,0,0,0.08);
}

/* ------------------------------------------------------------
   22. ACCORDION
   ------------------------------------------------------------ */
.accordion-button:not(.collapsed) {
    background-color: rgba(205,5,5,0.05);
    color: var(--brand-red);
}

.accordion-button:focus {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 0.2rem rgba(205,5,5,0.25);
}

.accordion-button:not(.collapsed)::after {
    filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(4983%) hue-rotate(349deg) brightness(92%) contrast(96%);
}

/* ------------------------------------------------------------
   23. OFF-CANVAS
   ------------------------------------------------------------ */
.offcanvas-header {
    background-color: rgba(0,39,94,0.02);
    color: var(--brand-navy);
}

.offcanvas-title {
    color: var(--brand-navy);
}

/* ------------------------------------------------------------
   24. PLACEHOLDERS
   ------------------------------------------------------------ */
.placeholder-primary {
    background-color: var(--brand-red) !important;
}

/* ------------------------------------------------------------
   25. CLOSE BUTTON
   ------------------------------------------------------------ */
.btn-close:focus {
    box-shadow: 0 0 0 0.2rem rgba(205,5,5,0.25);
}

/* ------------------------------------------------------------
   26. CUSTOM CHECKBOXES & RADIOS (Bootstrap Icons)
   ------------------------------------------------------------ */
.form-check-input:checked[type="checkbox"] {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}

.form-check-input:checked[type="radio"] {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}

/* ------------------------------------------------------------
   27. BREADCRUMB
   ------------------------------------------------------------ */
.breadcrumb-item.active {
    color: var(--brand-navy);
}

.breadcrumb-item a {
    color: var(--brand-navy);
}

    .breadcrumb-item a:hover {
        color: var(--brand-red);
    }

.breadcrumb-item + .breadcrumb-item::before {
    color: #6c757d;
}

/* ------------------------------------------------------------
   28. CAROUSEL
   ------------------------------------------------------------ */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0,39,94,0.3);
    border-radius: 50%;
}

.carousel-indicators [data-bs-target] {
    background-color: var(--brand-navy);
}

.carousel-indicators .active {
    background-color: var(--brand-red);
}

/* ------------------------------------------------------------
   29. RATINGS & STAR COMPONENTS
   ------------------------------------------------------------ */
.rating .star-filled,
.star-rating .filled {
    color: var(--brand-red);
}

.rating .star-empty {
    color: #dee2e6;
}

/* ------------------------------------------------------------
   30. YOUR CUSTOM CLASSES (Preserved & Enhanced)
   ------------------------------------------------------------ */
.text-red {
    color: var(--brand-red) !important;
}

.text-navy {
    color: var(--brand-navy) !important;
}

.bg-navy {
    background-color: var(--brand-navy) !important;
}

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

.btn-navy {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
}

    .btn-navy:hover {
        background-color: #001d47;
        border-color: #001d47;
    }

.btn-outline-navy {
    color: var(--brand-navy);
    border-color: var(--brand-navy);
}

    .btn-outline-navy:hover {
        background-color: var(--brand-navy);
        color: #fff;
    }

/* Status Badges - Using your colors */
.status-active {
    background: rgba(205,5,5,0.1);
    color: var(--brand-red);
    box-shadow: 0 0 6px rgba(205,5,5,0.3);
}

.status-inactive {
    background: rgba(0,39,94,0.1);
    color: var(--brand-navy);
    box-shadow: 0 0 6px rgba(0,39,94,0.3);
}

/* Property Price - Using Red */
.property-price {
    color: var(--brand-red) !important;
    font-weight: 700;
}

/* Section Titles - Using Navy */
.section-title {
    color: var(--brand-navy) !important;
    border-bottom: 2px solid rgba(0,39,94,0.15);
}

/* Badge Custom */
.badge-custom {
    background-color: rgba(0,39,94,0.08);
    color: var(--brand-navy);
}

/* Table Action Header */
.table-opportunities th.action-header {
    color: var(--brand-red) !important;
    font-weight: 800;
}

/* Card Hover Effect with your colors */
div.card.h-100.text-center.shadow-sm:hover {
    background-color: rgba(205,5,5,0.03);
}

/* ============================================================
   FINAL SAFEGUARD - Force all Bootstrap primary references
   ============================================================ */
[class*="bg-primary"],
[class*="btn-primary"],
[class*="text-primary"],
[class*="border-primary"],
[class*="alert-primary"],
[class*="badge-primary"],
[class*="list-group-item-primary"] {
    --bs-primary: var(--brand-red);
}

[class*="bg-dark"],
[class*="btn-dark"],
[class*="text-dark"],
[class*="border-dark"],
[class*="alert-dark"],
[class*="badge-dark"] {
    --bs-dark: var(--brand-navy);
}

/* Ensure all focus rings use red */
*:focus-visible:not(.btn-close):not(.form-check-input) {
    outline-color: var(--brand-red) !important;
}

/* Override any inline Bootstrap styles that might sneak through */
.btn-check:checked + .btn,
.btn-check:active + .btn,
.btn:active,
.btn.active,
.btn.show {
    background-color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
}

/* ------------------------------------------------------------
   FORCE OVERRIDE: btn-outline-success
   Using Navy: #00275E and Red: #CD0505
   ------------------------------------------------------------ */

/* Override the default green success outline button */
.btn-outline-success {
    --bs-btn-color: var(--brand-navy, #00275E) !important;
    --bs-btn-border-color: var(--brand-navy, #00275E) !important;
    --bs-btn-hover-bg: var(--brand-red, #CD0505) !important;
    --bs-btn-hover-border-color: var(--brand-red, #CD0505) !important;
    --bs-btn-active-bg: var(--brand-red, #CD0505) !important;
    --bs-btn-active-border-color: var(--brand-red, #CD0505) !important;
    --bs-btn-disabled-color: var(--brand-navy, #00275E) !important;
    --bs-btn-disabled-border-color: var(--brand-navy, #00275E) !important;
    color: var(--brand-navy, #00275E) !important;
    border-color: var(--brand-navy, #00275E) !important;
    background: transparent !important;
}

    /* Hover state - turns RED */
    .btn-outline-success:hover,
    .btn-outline-success:focus,
    .btn-outline-success:active {
        background-color: var(--brand-red, #CD0505) !important;
        border-color: var(--brand-red, #CD0505) !important;
        color: white !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(205,5,5,0.2);
    }

    /* Active/Focus state - keep consistent */
    .btn-outline-success:focus,
    .btn-outline-success.focus {
        box-shadow: 0 0 0 0.2rem rgba(205,5,5,0.25) !important;
    }

    /* Disabled state - using navy with reduced opacity */
    .btn-outline-success.disabled,
    .btn-outline-success:disabled {
        color: var(--brand-navy, #00275E) !important;
        background-color: transparent !important;
        border-color: var(--brand-navy, #00275E) !important;
        opacity: 0.5;
    }

/* Checked state (when using with btn-check) */
.btn-check:checked + .btn-outline-success,
.btn-check:active + .btn-outline-success {
    background-color: var(--brand-red, #CD0505) !important;
    border-color: var(--brand-red, #CD0505) !important;
    color: white !important;
}

 
.btn-outline-success:hover {
    background-color: var(--brand-navy, #00275E) !important;
    border-color: var(--brand-navy, #00275E) !important;
    color: white !important;
}

/* ------------------------------------------------------------
   FORCE OVERRIDE: btn-success
   Using Navy: #00275E and Red: #CD0505
   ------------------------------------------------------------ */

/* Override the default green success button */
.btn-success {
    --bs-btn-bg: var(--brand-navy, #00275E) !important;
    --bs-btn-border-color: var(--brand-navy, #00275E) !important;
    --bs-btn-hover-bg: var(--brand-red, #CD0505) !important;
    --bs-btn-hover-border-color: var(--brand-red, #CD0505) !important;
    --bs-btn-active-bg: var(--brand-red, #CD0505) !important;
    --bs-btn-active-border-color: var(--brand-red, #CD0505) !important;
    --bs-btn-disabled-bg: var(--brand-navy, #00275E) !important;
    --bs-btn-disabled-border-color: var(--brand-navy, #00275E) !important;
    background-color: var(--brand-navy, #00275E) !important;
    border-color: var(--brand-navy, #00275E) !important;
    color: white !important;
    transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
}

    /* Hover state - turns RED */
    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active {
        background-color: var(--brand-red, #CD0505) !important;
        border-color: var(--brand-red, #CD0505) !important;
        color: white !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(205,5,5,0.3);
    }

    /* Focus state - red glow */
    .btn-success:focus,
    .btn-success.focus {
        box-shadow: 0 0 0 0.2rem rgba(205,5,5,0.25) !important;
    }

    /* Active state (when clicking) */
    .btn-success:active,
    .btn-success.active {
        background-color: var(--brand-red-dark, #a30404) !important;
        border-color: var(--brand-red-dark, #a30404) !important;
        transform: translateY(0);
    }

    /* Disabled state */
    .btn-success.disabled,
    .btn-success:disabled {
        background-color: var(--brand-navy, #00275E) !important;
        border-color: var(--brand-navy, #00275E) !important;
        opacity: 0.6;
        transform: none;
    }

/* Checked state (when using with btn-check) */
.btn-check:checked + .btn-success,
.btn-check:active + .btn-success {
    background-color: var(--brand-red, #CD0505) !important;
    border-color: var(--brand-red, #CD0505) !important;
    color: white !important;
}

/* If you want hover to use NAVY instead of RED, use this alternative */
/* 
.btn-success {
    background-color: var(--brand-navy, #00275E) !important;
    border-color: var(--brand-navy, #00275E) !important;
}
.btn-success:hover {
    background-color: #001d47 !important;
    border-color: #001d47 !important;
}
*/

/* If you want the button to stay NAVY always (no red hover) */
/*
.btn-success {
    background-color: var(--brand-navy, #00275E) !important;
    border-color: var(--brand-navy, #00275E) !important;
}
.btn-success:hover {
    background-color: #001d47 !important;
    border-color: #001d47 !important;
    transform: translateY(-1px);
}
*/