/* ===================================
   Global Color Scheme - SMBC Website
   Primary Theme: #144aa8 (Crimson Red)
   =================================== */

:root {
    /* Primary Colors */
    --primary-color: #144aa8;       /* Deep Red */
    --primary-dark: #083f9e;        /* Darker Red */
    
    /* Button Colors */
    --button-color: #144aa8;        /* Deep Red */
    --button-hover: #083f9e;        /* Darker Red on Hover */
    
    /* Background Colors */
    --light-bg: #fdf2f4;            /* Light Red Tint */
    --body-bg: #ffffff;             /* White Background */
    --white: #ffffff;
    
    /* Text Colors */
    --text-dark: #222222;
    --text-medium: #444444;
    --text-light: #666666;
    --text-gray: #888888;
}

/* Apply Global Colors to Body & Common Elements */
body {
    background-color: var(--body-bg);
    color: var(--text-dark);
}

/* Primary Buttons Across All Modules */
.btn-primary,
button.primary,
.submit-btn,
.action-button,
.rent-btn,
.apply-btn,
.withdraw-btn-confirm,
.card-btn,
.wallet-btn,
.fab,
.claim-btn,
.con_btn {
    background-color: var(--button-color) !important;
    border-color: var(--button-color) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
button.primary:hover,
.submit-btn:hover,
.action-button:hover,
.rent-btn:hover,
.apply-btn:hover,
.withdraw-btn-confirm:hover,
.card-btn:hover,
.wallet-btn:hover,
.fab:hover,
.claim-btn:hover,
.con_btn:hover {
    background-color: var(--button-hover) !important;
    border-color: var(--button-hover) !important;
    color: #ffffff !important;
}

/* Headers and Top Navigation Across All Pages */
.top,
.top-bar,
.topbar,
.top-header,
.header,
.header-area,
.navbar,
nav {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    color: var(--white) !important;
}

/* Links */
a.primary-link {
    color: var(--primary-color) !important;
}

a.primary-link:hover {
    color: var(--primary-dark) !important;
}

/* Cards and Panels */
.card-primary,
.panel-primary {
    border-color: var(--primary-color) !important;
}

.card-primary .card-header,
.panel-primary .panel-heading,
.product-header,
.withdraw-modal-header {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

/* Balance List & Section Containers */
.balance-list {
    background-color: var(--primary-color) !important;
}

/* Success/Active States */
.text-success,
.success-text {
    color: var(--button-color) !important;
}

.bg-success,
.success-bg {
    background-color: var(--light-bg) !important;
}

/* Footer & Bottom Navigation */
footer {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.footer_menu .active p {
    color: var(--primary-color) !important;
}

.footer_menu .active img {
    background-color: var(--primary-color) !important;
    border-radius: 50%;
}

/* Active Tabs & Selected Options */
button.active,
.btn.active,
.nav-link.active,
.nav-item.active,
.tab-button.active,
.tab-buttons button.active,
.record-tab .tab-link.active,
.inline-tab .tab.cur,
.amount-option.active,
li.active,
.selected {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.amount-option.active {
    border-color: var(--primary-color) !important;
    background-color: #ffffff !important;
    color: var(--primary-color) !important;
}

/* Focus States */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(20, 74, 168, 0.25) !important;
}

/* Badges, Labels & Badges */
.badge,
.badge-primary,
.label-primary,
.support-badge {
    background-color: var(--button-color) !important;
    color: #ffffff !important;
}

/* Progress Bars */
.progress-bar,
.progress-fill {
    background-color: var(--button-color) !important;
}

/* Tabs */
.nav-tabs .nav-link.active {
    color: var(--primary-color) !important;
    border-bottom-color: var(--primary-color) !important;
}

/* Scrollbar */
::-webkit-scrollbar-thumb {
    background-color: var(--primary-color) !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-dark) !important;
}

/* Loading Spinner */
.spinner,
.loader {
    border-top-color: var(--primary-color) !important;
}

/* Alerts & Popups */
.alert-success {
    background-color: var(--light-bg) !important;
    border-color: var(--button-color) !important;
    color: var(--primary-color) !important;
}

.popup button,
.popup a.join-btn {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* Product Image Vertical Centering (Middle Alignment) */
.product-content {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.product-left {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    margin: auto 0 !important;
    flex-shrink: 0 !important;
}

.product-left img,
.product-img img {
    align-self: center !important;
    margin: auto !important;
}

/* Action Icons Color Filter to #144aa8 Red */
.action-btn img,
.action_btn img,
.balance-card img,
.balance-card .item img {
    filter: brightness(0) saturate(100%) invert(28%) sepia(47%) saturate(1595%) hue-rotate(180deg) brightness(86%) contrast(91%) !important;
}