/**
 * Vibo Branding Colors
 * 
 * Primary Red: #FE0000 / #DA241B
 * Dark Green: #024C33 / #025624
 * Lime Green: #97C00E / #B9DA80
 * Light Green: #E5F2EB
 * White: #FEFEFE
 */

:root {
    --vibo-red: #FE0000 !important;
    --vibo-red-dark: #DA241B !important;
    --vibo-dark-green: #024C33 !important;
    --vibo-dark-green-alt: #025624 !important;
    --vibo-lime: #97C00E !important;
    --vibo-lime-light: #B9DA80 !important;
    --vibo-light-green: #E5F2EB !important;
    --vibo-white: #FEFEFE !important;
    --vibo-primary: #FE0000 !important;
    --vibo-secondary: #024C33 !important;
    --vibo-accent: #97C00E !important;
}

/* Force Vibo branding on all elements */
body {
    --bs-primary: var(--vibo-primary) !important;
    --bs-secondary: var(--vibo-secondary) !important;
    --bs-success: var(--vibo-lime) !important;
}

/* Override Bootstrap button colors */
.btn-primary {
    --bs-btn-bg: var(--vibo-primary) !important;
    --bs-btn-border-color: var(--vibo-primary) !important;
    --bs-btn-hover-bg: #CC0000 !important;
    --bs-btn-hover-border-color: #CC0000 !important;
    --bs-btn-active-bg: #B30000 !important;
    --bs-btn-active-border-color: #B30000 !important;
    --bs-btn-disabled-bg: #FF4D4D !important;
    --bs-btn-disabled-border-color: #FF4D4D !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--vibo-primary) !important;
    --bs-btn-border-color: var(--vibo-primary) !important;
    --bs-btn-hover-bg: var(--vibo-primary) !important;
    --bs-btn-hover-border-color: var(--vibo-primary) !important;
    --bs-btn-active-bg: var(--vibo-primary) !important;
    --bs-btn-active-border-color: var(--vibo-primary) !important;
}

/* Table styling */
.table thead th {
    background-color: var(--vibo-dark-green) !important;
    color: var(--vibo-white) !important;
    border-color: var(--vibo-dark-green) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(229, 242, 235, 0.5) !important;
}

/* Card headers */
.card-header {
    background-color: var(--vibo-dark-green) !important;
    color: var(--vibo-white) !important;
    border-bottom: 1px solid var(--vibo-dark-green) !important;
}

/* Form controls focus state */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--vibo-lime) !important;
    box-shadow: 0 0 0 0.25rem rgba(151, 192, 14, 0.25) !important;
}

/* Pagination */
.page-link {
    color: var(--vibo-dark-green) !important;
}

.page-item.active .page-link {
    background-color: var(--vibo-dark-green) !important;
    border-color: var(--vibo-dark-green) !important;
}

/* Badges */
.badge.bg-primary {
    background-color: var(--vibo-primary) !important;
}

.badge.bg-secondary {
    background-color: var(--vibo-secondary) !important;
}

.badge.bg-success {
    background-color: var(--vibo-lime) !important;
}

/* Custom checkbox styling */
.form-check-input:checked {
    background-color: var(--vibo-dark-green) !important;
    border-color: var(--vibo-dark-green) !important;
}

/* Select2 dropdown styling */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--vibo-dark-green) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--vibo-light-green) !important;
    border-color: var(--vibo-lime) !important;
    color: var(--vibo-dark-green) !important;
}

/* body {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
} */

/* Primary Button Styling */
.btn-vibo-primary {
    background-color: var(--vibo-red);
    border-color: var(--vibo-red);
    color: var(--vibo-dark-green);
    font-weight: 600;
}

.btn-vibo-primary:hover {
    background-color: #CC0000;
    border-color: #CC0000;
    color: var(--vibo-dark-green);
}

/* Secondary Button Styling */
.btn-vibo-secondary {
    background-color: var(--vibo-dark-green);
    border-color: var(--vibo-dark-green);
    color: var(--vibo-white);
}

.btn-vibo-secondary:hover {
    background-color: #035A44;
    border-color: #035A44;
    color: var(--vibo-white);
}

/* Accent Button Styling */
.btn-vibo-accent {
    background-color: var(--vibo-lime);
    border-color: var(--vibo-lime);
    color: var(--vibo-white);
}

.btn-vibo-accent:hover {
    background-color: #7AB00C;
    border-color: #7AB00C;
    color: var(--vibo-white);
}

/* Badge Styling */
.badge-vibo-yellow {
    background-color: var(--vibo-red);
    color: var(--vibo-dark-green);
}

.badge-vibo-blue {
    background-color: var(--vibo-dark-green);
    color: var(--vibo-white);
}

.badge-vibo-purple {
    background-color: var(--vibo-lime);
    color: var(--vibo-white);
}

/* Card Header Styling */
.card-header-vibo {
    background: linear-gradient(135deg, var(--vibo-red) 0%, #FE3333 100%);
    color: var(--vibo-dark-green);
    font-weight: 600;
}

/* Sidebar Branding */
.sidebar-vibo {
    background: linear-gradient(180deg, var(--vibo-dark-green) 0%, #035A44 100%);
}

.sidebar-vibo .nav-link {
    color: var(--vibo-white);
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.sidebar-vibo .nav-link:hover {
    background-color: rgba(255, 237, 0, 0.1);
    color: var(--vibo-red);
    border-left-color: var(--vibo-red);
    padding-left: 1.2rem;
}

.sidebar-vibo .nav-item.active .nav-link {
    background: linear-gradient(90deg, rgba(255, 237, 0, 0.2) 0%, transparent 100%);
    color: var(--vibo-red);
    border-left-color: var(--vibo-red);
    font-weight: 600;
}

.sidebar-vibo .sidebar-heading {
    color: var(--vibo-red);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    padding: 0.5rem 1rem;
}

.sidebar-vibo .sidebar-brand {
    background-color: var(--vibo-red);
    transition: all 0.3s ease;
}

.sidebar-vibo .sidebar-brand:hover {
    background-color: #FE3333;
    transform: scale(1.02);
}

.sidebar-vibo .sidebar-divider {
    border-color: rgba(255, 237, 0, 0.3);
}

/* Sidebar Toggle Button */
#sidebarToggle {
    background-color: rgba(255, 237, 0, 0.2);
    transition: all 0.3s ease;
}

#sidebarToggle:hover {
    background-color: rgba(255, 237, 0, 0.4);
    transform: scale(1.1);
}

/* Badge in Sidebar */
.sidebar-vibo .badge {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Top Navigation Bar */
.topbar-vibo {
    background: var(--vibo-white);
    border-bottom: 3px solid var(--vibo-red);
}

/* Text Colors */
.text-vibo-yellow {
    color: var(--vibo-red);
}

.text-vibo-blue {
    color: var(--vibo-dark-green);
}

.text-vibo-purple {
    color: var(--vibo-lime);
}

/* Background Colors */
.bg-vibo-yellow {
    background-color: var(--vibo-red);
}

.bg-vibo-blue {
    background-color: var(--vibo-dark-green);
}

.bg-vibo-purple {
    background-color: var(--vibo-lime);
}

/* Link Styling */
a.vibo-link {
    color: var(--vibo-lime);
    text-decoration: none;
}

a.vibo-link:hover {
    color: var(--vibo-dark-green);
    text-decoration: underline;
}

/* Alert Styling */
.alert-vibo-success {
    background-color: #E6FFE6;
    border-color: var(--vibo-red);
    color: var(--vibo-dark-green);
}

.alert-vibo-info {
    background-color: #E6F3FF;
    border-color: var(--vibo-dark-green);
    color: var(--vibo-dark-green);
}

.alert-vibo-warning {
    background-color: #FFF9E6;
    border-color: var(--vibo-red);
    color: var(--vibo-dark-green);
}

/* Table Styling */
.table-vibo thead {
    background-color: var(--vibo-dark-green);
    color: var(--vibo-white);
}

.table-vibo tbody tr:hover {
    background-color: rgba(255, 237, 0, 0.1);
}

/* Form Control Focus */
.form-control:focus {
    border-color: var(--vibo-red);
    box-shadow: 0 0 0 0.2rem rgba(255, 237, 0, 0.25);
}

/* Category Tree Styling */
.tree-node-vibo {
    border-left: 3px solid var(--vibo-red);
    padding-left: 15px;
    margin-left: 10px;
}

.tree-node-vibo:hover {
    background-color: rgba(255, 237, 0, 0.05);
}

/* Breadcrumb Styling */
.breadcrumb-vibo {
    background-color: transparent;
}

.breadcrumb-vibo .breadcrumb-item.active {
    color: var(--vibo-dark-green);
    font-weight: 600;
}

.breadcrumb-vibo .breadcrumb-item a {
    color: var(--vibo-lime);
}

.breadcrumb-vibo .breadcrumb-item a:hover {
    color: var(--vibo-dark-green);
}

/* Progress Bar */
.progress-bar-vibo {
    background-color: var(--vibo-red);
}

/* Pagination */
.pagination .page-item.active .page-link {
    background-color: var(--vibo-red);
    border-color: var(--vibo-red);
    color: var(--vibo-dark-green);
}

.pagination .page-link {
    color: var(--vibo-lime);
}

.pagination .page-link:hover {
    background-color: rgba(255, 237, 0, 0.1);
    color: var(--vibo-dark-green);
}

/* Dropdown Menu */
.dropdown-menu-vibo {
    border-top: 3px solid var(--vibo-red);
}

.dropdown-item:hover {
    background-color: rgba(255, 237, 0, 0.1);
    color: var(--vibo-dark-green);
}

/* Modal Header */
.modal-header-vibo {
    background: linear-gradient(135deg, var(--vibo-red) 0%, #FE3333 100%);
    color: var(--vibo-dark-green);
}

/* Spinner/Loader */
.spinner-vibo {
    border: 4px solid rgba(255, 237, 0, 0.3);
    border-top: 4px solid var(--vibo-red);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--vibo-white);
}

::-webkit-scrollbar-thumb {
    background: #024C33;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #035A44;
}

/* Gradient Backgrounds */
.bg-gradient-vibo-primary {
    background: linear-gradient(135deg, var(--vibo-red) 0%, #FE3333 100%);
}

.bg-gradient-vibo-secondary {
    background: linear-gradient(135deg, var(--vibo-dark-green) 0%, #035A44 100%);
}

.bg-gradient-vibo-accent {
    background: linear-gradient(135deg, var(--vibo-lime) 0%, #7AB00C 100%);
}

/* Shadow Effects */
.shadow-vibo-sm {
    box-shadow: 0 2px 4px rgba(255, 237, 0, 0.2);
}

.shadow-vibo {
    box-shadow: 0 4px 8px rgba(255, 237, 0, 0.3);
}

.shadow-vibo-lg {
    box-shadow: 0 8px 16px rgba(255, 237, 0, 0.4);
}

/* ============================================================================
   FRONTEND LAYOUT BRANDING
   ============================================================================ */

/* Header Buttons - Light Green Background */
.ms-header-bottons {
    background-color: #E5F2EB !important;
    padding: 0.5rem;
    border-radius: 8px;
}

/* Scrolling Text - Red Background */
.scrolling--text.scrolling--text--left {
    background: linear-gradient(90deg, #DA241B 0%, #FE0000 100%) !important;
}

/* Header Top - Dark Green Background */
.header-top {
    background-color: #025624 !important;
    color: #FEFEFE;
}

.header-top a,
.header-top .header-top-message,
.header-top .dropdown-toggle {
    color: #FEFEFE !important;
}

.header-top .header-top-social a:hover {
    color: #B9DA80 !important;
}

/* Nearby Card - Light Lime Background */
.ms-nearby-card {
    background-color: #B8DC7C !important;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ms-nearby-card .ms-nearby-icon {
    background-color: #025624;
    border-radius: 50%;
    padding: 0.75rem;
}

.ms-nearby-card h5,
.ms-nearby-card p {
    color: #024C33 !important;
}

/* Navigation Flex Container */
.ms-flex {
    background-color: #E5F2EB !important;
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

/* Navigation List */
.ms-nav-list {
    background-color: #E5F2EB !important;
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

.ms-nav-list li a {
    color: #024C33 !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.ms-nav-list li a:hover {
    color: #FE0000 !important;
    background-color: rgba(254, 0, 0, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 6px;
}

.ms-nav-list li a.active {
    color: #FE0000 !important;
    background-color: rgba(254, 0, 0, 0.15);
    font-weight: 600;
}

/* Mobile Navigation */
@media (max-width: 991px) {
    .ms-flex {
        background-color: #E5F2EB !important;
        padding: 0.5rem;
    }
    
    .ms-nav-list {
        background-color: #E5F2EB !important;
        flex-direction: column;
        width: 100%;
    }
    
    .ms-nav-list li {
        width: 100%;
        border-bottom: 1px solid rgba(2, 76, 51, 0.1);
    }
    
    .ms-nav-list li:last-child {
        border-bottom: none;
    }
    
    .ms-nav-list li a {
        display: block;
        padding: 0.75rem 1rem;
        width: 100%;
    }
    
    /* Mobile Header Buttons */
    .ms-header-bottons {
        background-color: #E5F2EB !important;
        padding: 0.5rem !important;
        border-radius: 8px !important;
    }
    
    /* Mobile Header Top */
    .header-top {
        background-color: #025624 !important;
    }
    
    .header-top * {
        color: #FEFEFE !important;
    }

    /* Keep mobile icon labels readable on light-green header buttons */
    .header-top .ms-header-bottons .ms-mobile-icon-label {
        color: var(--vibo-secondary) !important;
    }

    .header-top .ms-header-bottons .ms-mobile-icon-label.is-primary {
        color: var(--vibo-primary) !important;
    }

    .header-top .ms-header-bottons .ms-mobile-icon-label.is-accent {
        color: var(--vibo-accent) !important;
    }
    
    /* Mobile Search Section */
    .ms-header-bottom.d-lg-none {
        background-color: #E5F2EB !important;
    }
    
    /* Mobile Menu Sidebar */
    .ms-mobile-menu {
        background-color: #E5F2EB !important;
    }
    
    .ms-mobile-menu .ms-menu-title {
        background-color: #025624 !important;
        color: #FEFEFE !important;
    }
    
    .ms-mobile-menu .ms-close-menu {
        color: #FEFEFE !important;
    }
    
    /* Mobile Scrolling Text - Smaller font */
    .scrolling--text.scrolling--text--left {
        min-height: 28px !important;
        padding: 1px 0 !important;
    }
    
    .scrolling--text .scrolling--item {
        font-size: 0.875rem !important;
    }
    
    /* Mobile Nearby Card - Hidden on mobile, but if shown */
    .ms-nearby-card {
        padding: 0.75rem !important;
        border-radius: 8px !important;
    }
}

/* Utility: font-size-lg — defined here so it overrides bundled/third-party CSS */
.font-size-lg {
    font-size: 1.25rem; /* ~20px */
    line-height: 1.2;
}


/* Ensure containers inherit the site's base font size and family
   Fixes cases where other CSS (bundled or plugins) reduces font size
   when wrapping content with `.container` */
.container {
    font-size: 1rem; /* equal to root font-size (16px by default) */
    font-family: inherit;
}

/* Donate by Post banner - mobile tuning */
@media (max-width: 575.98px) {
    .donate-by-post-title {
        font-size: 1.45rem !important;
        margin-bottom: 0.5rem !important;
    }

    .donate-by-post-card {
        right: 0.5rem !important;
        left: 0.5rem !important;
        bottom: 0.5rem !important;
        max-width: none !important;
        padding: 0.75rem 0.9rem !important;
        border-radius: 10px !important;
    }

    .donate-by-post-card-title {
        font-size: 0.95rem !important;
        line-height: 1.15 !important;
    }

    .donate-by-post-card-text {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
    }

    .donate-by-post-card-icon {
        width: 30px !important;
        height: 30px !important;
        margin-top: 0.35rem !important;
    }

    .donate-by-post-card-icon i {
        font-size: 0.8rem !important;
    }
}