/* ===============================================
   Design System Variables - Global CSS Custom Properties
   Phase 2b Implementation: Unified Design System Foundation
   =============================================== */

/* This file contains all shared CSS custom properties used across components.
   It should be included before any component-specific CSS files. */

:root {
    /* ===============================================
       COLOR PALETTE
       =============================================== */
    
    /* Primary Brand Colors */
    --color-primary: #198754;
    --color-primary-light: rgba(25, 135, 84, 0.1);
    --color-primary-medium: rgba(25, 135, 84, 0.2);
    --color-primary-strong: rgba(25, 135, 84, 0.3);
    --color-primary-vibrant: rgba(25, 135, 84, 0.4);
    --color-primary-dark: #059669;
    
    /* Secondary Colors */
    --color-blue: #3b82f6;
    --color-blue-light: rgba(59, 130, 246, 0.1);
    --color-blue-medium: rgba(59, 130, 246, 0.2);
    --color-blue-strong: rgba(59, 130, 246, 0.3);
    --color-blue-vibrant: rgba(59, 130, 246, 0.4);
    --color-blue-dark: #1d4ed8;
    
    /* Accent Colors */
    --color-teal: #14b8a6;
    --color-teal-light: rgba(20, 184, 166, 0.1);
    --color-teal-medium: rgba(20, 184, 166, 0.2);
    --color-teal-strong: rgba(20, 184, 166, 0.3);
    --color-teal-vibrant: rgba(20, 184, 166, 0.4);
    --color-teal-dark: #0d9488;
    
    /* Success Colors */
    --color-success: #10b981;
    --color-success-light: rgba(16, 185, 129, 0.1);
    --color-success-medium: rgba(16, 185, 129, 0.2);
    --color-success-strong: rgba(16, 185, 129, 0.3);
    --color-success-dark: #059669;
    
    /* Error Colors */
    --color-error: #ef4444;
    --color-error-light: rgba(239, 68, 68, 0.1);
    --color-error-medium: rgba(239, 68, 68, 0.2);
    --color-error-dark: #dc2626;
    
    /* Warning Colors */
    --color-warning: #f59e0b;
    --color-warning-light: rgba(245, 158, 11, 0.1);
    --color-warning-medium: rgba(245, 158, 11, 0.2);
    --color-warning-dark: #d97706;
    
    /* Info Colors */
    --color-info: #3b82f6;
    --color-info-light: rgba(59, 130, 246, 0.1);
    --color-info-medium: rgba(59, 130, 246, 0.2);
    --color-info-dark: #1d4ed8;
    
    /* Neutral Colors */
    --color-white: #ffffff;
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;
    --color-black: #000000;
    
    /* Semantic Colors */
    --color-text: #374151;
    --color-text-muted: #6b7280;
    --color-text-light: #9ca3af;
    --color-border: #e5e7eb;
    --color-border-light: #f3f4f6;
    --color-disabled: #f8f9fa;
    --color-disabled-text: #6c757d;
    --color-disabled-border: #dee2e6;
    
    /* ===============================================
       SPACING SYSTEM
       =============================================== */
    
    --spacing-xs: 4px;    /* 0.25rem */
    --spacing-sm: 8px;    /* 0.5rem */
    --spacing-md: 12px;   /* 0.75rem */
    --spacing-lg: 16px;   /* 1rem */
    --spacing-xl: 20px;   /* 1.25rem */
    --spacing-2xl: 24px;  /* 1.5rem */
    --spacing-3xl: 32px;  /* 2rem */
    --spacing-4xl: 40px;  /* 2.5rem */
    --spacing-5xl: 44px;  /* 2.75rem - Touch target minimum */
    --spacing-6xl: 48px;  /* 3rem - Enhanced touch target */
    --spacing-7xl: 56px;  /* 3.5rem */
    --spacing-8xl: 64px;  /* 4rem */
    
    /* ===============================================
       TYPOGRAPHY SYSTEM
       =============================================== */
    
    /* Font Sizes */
    --font-size-xs: 12px;   /* 0.75rem */
    --font-size-sm: 14px;   /* 0.875rem */
    --font-size-base: 16px; /* 1rem - Base size, prevents iOS zoom */
    --font-size-lg: 18px;   /* 1.125rem */
    --font-size-xl: 20px;   /* 1.25rem */
    --font-size-2xl: 24px;  /* 1.5rem */
    --font-size-3xl: 30px;  /* 1.875rem */
    --font-size-4xl: 36px;  /* 2.25rem */
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    /* ===============================================
       BORDER RADIUS SYSTEM
       =============================================== */
    
    --radius-none: 0;
    --radius-sm: 6px;    /* 0.375rem */
    --radius-md: 8px;    /* 0.5rem */
    --radius-lg: 10px;   /* 0.625rem */
    --radius-xl: 12px;   /* 0.75rem */
    --radius-2xl: 16px;  /* 1rem */
    --radius-3xl: 20px;  /* 1.25rem */
    --radius-full: 9999px;
    
    /* ===============================================
       SHADOW SYSTEM
       =============================================== */
    
    /* Base Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-2xl: 0 8px 25px rgba(0, 0, 0, 0.1);
    --shadow-3xl: 0 25px 50px rgba(0, 0, 0, 0.15);
    
    /* Colored Shadows */
    --shadow-primary: 0 4px 12px rgba(25, 135, 84, 0.4);
    --shadow-primary-lg: 0 8px 32px rgba(25, 135, 84, 0.3);
    --shadow-blue: 0 4px 16px rgba(59, 130, 246, 0.3);
    --shadow-blue-lg: 0 8px 32px rgba(59, 130, 246, 0.25);
    --shadow-teal: 0 4px 16px rgba(20, 184, 166, 0.3);
    --shadow-teal-lg: 0 8px 32px rgba(20, 184, 166, 0.3);
    --shadow-success: 0 2px 8px rgba(16, 185, 129, 0.3);
    --shadow-error: 0 4px 12px rgba(239, 68, 68, 0.25);
    
    /* Focus Shadows */
    --shadow-focus-primary: 0 0 0 3px rgba(25, 135, 84, 0.1);
    --shadow-focus-blue: 0 0 0 3px rgba(59, 130, 246, 0.1);
    --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.1);
    
    /* ===============================================
       TRANSITION SYSTEM
       =============================================== */
    
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-colors: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    --transition-transform: transform 0.3s ease;
    --transition-all: all 0.3s ease;
    
    /* ===============================================
       Z-INDEX SYSTEM
       =============================================== */
    
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    --z-index-toast: 1080;
    
    /* ===============================================
       BREAKPOINTS (for reference in media queries)
       =============================================== */
    
    /* These are provided as comments since CSS custom properties 
       cannot be used directly in media queries */
    
    /* --breakpoint-xs: 0px; */
    /* --breakpoint-sm: 576px; */
    /* --breakpoint-md: 768px; */
    /* --breakpoint-lg: 992px; */
    /* --breakpoint-xl: 1200px; */
    /* --breakpoint-2xl: 1400px; */
    
    /* ===============================================
       COMPONENT-SPECIFIC VARIABLES
       =============================================== */
    
    /* Button System */
    --button-height-sm: var(--spacing-4xl);
    --button-height-md: var(--spacing-5xl);
    --button-height-lg: var(--spacing-6xl);
    --button-padding-x-sm: var(--spacing-md);
    --button-padding-x-md: var(--spacing-lg);
    --button-padding-x-lg: var(--spacing-xl);
    
    /* Form System */
    --form-height-sm: 36px;
    --form-height-md: 50px;
    --form-height-lg: 56px;
    --form-padding-x: var(--spacing-lg);
    --form-padding-y: var(--spacing-sm);
    
    /* Card System */
    --card-padding: var(--spacing-lg);
    --card-padding-lg: var(--spacing-2xl);
    --card-border-radius: var(--radius-xl);
    
    /* Navigation System */
    --nav-height: 64px;
    --nav-padding-x: var(--spacing-lg);
    --nav-padding-y: var(--spacing-md);
    
    /* Table System */
    --table-cell-padding-x: var(--spacing-md);
    --table-cell-padding-y: var(--spacing-sm);
    --table-row-hover-bg: var(--color-gray-50);
    
    /* ===============================================
       BACKGROUND SYSTEM
       =============================================== */
    
    /* Semantic Backgrounds */
    --bg-light: var(--color-gray-50);
    --bg-section: var(--color-gray-100);
    --bg-primary-light: var(--color-primary-light);
    --bg-success-light: var(--color-success-light);
    --bg-info-light: var(--color-info-light);
    --bg-warning-light: var(--color-warning-light);
    --bg-error-light: var(--color-error-light);
    --bg-teal-light: var(--color-teal-light);
    
    /* Gradient Backgrounds */
    --bg-gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --bg-gradient-blue: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-dark) 100%);
    --bg-gradient-teal: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-dark) 100%);
    --bg-gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
}

/* ===============================================
   UTILITY CLASSES - BACKGROUND SYSTEM
   =============================================== */

.bg-light {
    background-color: var(--bg-light);
}

.bg-section {
    background-color: var(--bg-section);
}

.bg-primary-light {
    background-color: var(--bg-primary-light);
}

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

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

.bg-warning-light {
    background-color: var(--bg-warning-light);
}

.bg-error-light {
    background-color: var(--bg-error-light);
}

.bg-teal-light {
    background-color: var(--bg-teal-light);
}

/* Gradient Backgrounds */
.bg-gradient-primary {
    background: var(--bg-gradient-primary);
}

.bg-gradient-blue {
    background: var(--bg-gradient-blue);
}

.bg-gradient-teal {
    background: var(--bg-gradient-teal);
}

.bg-gradient-success {
    background: var(--bg-gradient-success);
}

/* ===============================================
   UTILITY CLASSES - SPACING SYSTEM
   =============================================== */

.spacing-section {
    padding: var(--spacing-xl) 0;
}

.spacing-component {
    padding: var(--spacing-lg);
}

.spacing-element {
    margin-bottom: var(--spacing-lg);
}

.spacing-tight {
    margin-bottom: var(--spacing-md);
}

.spacing-loose {
    margin-bottom: var(--spacing-2xl);
}

/* ===============================================
   UTILITY CLASSES - CARD SYSTEM
   =============================================== */

.card-elevated-lg {
    box-shadow: var(--shadow-xl);
    border-radius: var(--card-border-radius);
    border: 1px solid var(--color-border);
    background: var(--color-white);
}

.card-floating {
    box-shadow: var(--shadow-2xl);
    border-radius: var(--card-border-radius);
    background: var(--color-white);
    border: none;
}

/* ===============================================
   UTILITY CLASSES - TEXT COLORS
   =============================================== */

.text-primary {
    color: var(--color-primary);
}

.text-success {
    color: var(--color-success);
}

.text-error {
    color: var(--color-error);
}

.text-warning {
    color: var(--color-warning);
}

.text-info {
    color: var(--color-info);
}

.text-teal {
    color: var(--color-teal);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-light {
    color: var(--color-text-light);
}

/* ===============================================
   FORM ENHANCEMENTS
   =============================================== */

/* Enhanced form controls with better height and spacing */
.form-control,
.form-select {
    min-height: var(--form-height-md);
    padding: var(--spacing-md) var(--form-padding-x);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: var(--transition-colors);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus-primary);
    outline: 0;
}

/* Enhanced form labels with better weight and spacing */
.form-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
    display: inline-block;
}

/* Large form controls for better touch targets */
.form-control-lg,
.form-select-lg {
    min-height: var(--form-height-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: var(--font-size-lg);
    border-radius: var(--radius-lg);
}

/* Small form controls when needed */
.form-control-sm,
.form-select-sm {
    min-height: var(--form-height-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

/* Textarea specific styling */
textarea.form-control {
    min-height: calc(var(--form-height-md) * 2.5);
    resize: vertical;
}

/* ===============================================
   ICON FONTS
   =============================================== */

@font-face {
  font-family: "Flaticon";
  src: url("../temp/font/flat-icon/font/Flaticon.eot");
  src: url("../temp/font/flat-icon/font/Flaticon.eot?#iefix") format("embedded-opentype"),
       url("../temp/font/flat-icon/font/Flaticon.woff") format("woff"),
       url("../temp/font/flat-icon/font/Flaticon.ttf") format("truetype"),
       url("../temp/font/flat-icon/font/Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="flaticon-"]:before, 
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after, 
[class*=" flaticon-"]:after {   
  font-family: Flaticon;
  font-size: inherit;
  font-style: normal;
  color: inherit;
}

.flaticon-donation-2:before { content: "\f109"; }

/* ===============================================
   NAVIGATION SYSTEM
   =============================================== */

/* Bootstrap 5 Compatible Navigation Styles */
.navbar {
    min-height: 75px;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

.navbar-brand {
    color: var(--color-primary) !important;
    font-size: 28px;
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--color-primary) !important;
}

.navbar-brand__icon {
    margin-right: 0.5rem;
    font-size: 28px !important;
    color: var(--color-primary);
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* Specific styling for the donation icon in navbar */
.navbar-brand .flaticon-donation-2 {
    font-size: 28px !important;
    margin-right: var(--spacing-sm) !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* Fix layout shift - prevent header movement when collapse opens */
.navbar-toggler {
    border: 1px solid rgba(255,255,255,0.3);
    padding: 0.25rem 0.5rem;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.25);
}

/* Ensure container doesn't expand when collapse opens */
.navbar .container-fluid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Desktop navigation styles */
@media (min-width: 992px) {
    .navbar-nav .nav-link {
        color: #FFFFFF !important;
        padding: 1.5rem 1rem !important;
        font-size: 22px !important;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        color: var(--color-primary) !important;
        background-color: transparent !important;
    }

    .navbar-nav .nav-link.active {
        color: var(--color-primary) !important;
        font-size: 24px !important;
    }

    .navbar-brand {
        padding: 1.5rem 0 !important;
    }
}

/* Dropdown Menu Styles - Universal for all screen sizes */
.dropdown-menu {
    background-color: #212529 !important; /* Match navbar bg-dark */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    min-width: 200px !important;
    padding: 0.5rem 0 !important;
    margin-top: 0.5rem !important;
    border-radius: 0.375rem !important;
}

.dropdown-item {
    color: #ffffff !important;
    padding: 0.625rem 1rem !important;
    font-size: 16px !important;
    background-color: transparent !important;
    border: none !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

.dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 0.5rem 0 !important;
}

/* Ensure dropdown positioning works correctly */
.nav-item.dropdown {
    position: relative !important;
}

.dropdown-menu.show {
    display: block !important;
}

/* Mobile navigation styles */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: rgba(33, 37, 41, 0.98);
        border-radius: 0 0 8px 8px;
        margin-top: 0.5rem;
        padding: 1rem;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    .navbar-nav {
        padding: 0;
    }

    .navbar-nav .nav-link {
        color: #FFFFFF !important;
        padding: 0.75rem 1rem 0.75rem 1rem !important;
        font-size: 18px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        color: var(--color-primary) !important;
        background-color: var(--color-primary-light);
        padding: 0.75rem 1rem 0.75rem 2rem !important;
        border-radius: 0.25rem;
    }

    .navbar-nav .nav-link.active {
        color: var(--color-primary) !important;
        font-weight: 600;
        background-color: var(--color-primary-medium);
        padding: 0.75rem 1rem 0.75rem 2rem !important;
        border-radius: 0.25rem;
    }

    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }

    .navbar-brand {
        padding: 1rem 0 !important;
        font-size: 24px !important;
    }

    .navbar-nav .dropdown-menu {
        background-color: rgba(33, 37, 41, 0.95);
        border: none;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
        margin-top: 0.5rem;
        border-radius: 4px;
    }

    .navbar-nav .dropdown-item {
        color: #fff !important;
        padding: 0.5rem 1rem;
    }
}

/* ===============================================
   DESIGN SYSTEM DOCUMENTATION
   =============================================== */

/* ===============================================
   GENERIC REUSABLE COMPONENTS (NO PAGE-SPECIFIC CLASSES)
   =============================================== */

/* Elevated Card - REPLACED BY card shadow */

/* Enhanced card body padding - Reusable for forms, content, etc. */
.card-body-enhanced {
    padding: 2rem;
}

/* Border utilities - REPLACED BY Bootstrap border classes */

/* Transparent card footer - Reusable for any card needing footer */
.card-footer-transparent {
    background: transparent;
    border-top: 1px solid #dee2e6;
    padding: 1.5rem 2rem;
}

/* Full height centered section - Reusable for any centered page content */
.section-centered {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 3rem 0;
}

/* Centered container - Reusable for any content needing center constraint */
.container-narrow {
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
}

/* Card size variants with elevation - Reusable for different card widths */
.card-xs {
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

.card-sm {
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

.card-md {
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

.card-lg {
    width: 100%;
    max-width: 42rem;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

.card-xl {
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

.card-xxl {
    width: 100%;
    max-width: 54rem;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

.card-xxxl {
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

/* Enhanced header - Reusable for any page needing centered header - REPLACED BY text-center mb-4 */

.header-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #32325d;
    margin-bottom: 0.5rem;
}

.header-subtitle {
    color: #8898aa;
    font-size: 1rem;
    margin-bottom: 0;
}

.header-subtitle-success {
    color: #28a745;
}

/* Enhanced button styling - Reusable for any primary actions */
.btn-enhanced-primary {
    background: linear-gradient(45deg, #28a745, #34ce57) !important;
    border: none !important;
    color: white !important;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.btn-enhanced-primary:hover {
    background: linear-gradient(45deg, #218838, #28a745) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3) !important;
    color: white !important;
}

/* Light background section - REPLACED BY bg-light */

/* Button variants */
.btn-success-gradient {
    background: linear-gradient(45deg, #28a745, #34ce57);
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: var(--border-radius-md);
    transition: all 0.2s ease;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.btn-success-gradient:hover {
    background: linear-gradient(45deg, #218838, #28a745);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
    color: white;
}

.btn-success-gradient:focus {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    color: white;
}

/* Text center header utility */
.text-center-header {
    text-align: center;
    margin-bottom: 2rem;
}

.text-center-header h1,
.text-center-header h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #32325d;
    margin-bottom: 0.5rem;
}

.text-center-header p {
    color: var(--color-primary);
    font-size: 1rem;
    margin-bottom: 0;
    font-weight: 500;
}

/* Header title variants */
.header-title-primary {
    color: #32325d !important;
}

.header-subtitle-success {
    color: #28a745 !important;
}

/* Header subtitle with underline accent */
.header-subtitle-underlined {
    color: #28a745 !important;
    position: relative;
    padding-bottom: 1rem;
}

.header-subtitle-underlined::after {
    content: '';
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: 3px;
    background-color: #28a745;
    border-radius: 2px;
}

/* Link groups */
.link-group {
    text-align: center;
    margin-top: 1.5rem;
}

.link-group-item {
    margin-bottom: 0.75rem;
}

.link-group-text {
    color: #6c757d;
    margin-right: 0.25rem;
}

.link-group a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.link-group a:hover,
.link-group-link:hover {
    color: #218838;
    text-decoration: underline;
}

.link-group-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

/* Content divider utility */
.content-divider {
    position: relative;
    margin: var(--spacing-2xl) 0;
    text-align: center;
}

.content-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-light);
    z-index: 1;
}

.content-divider span {
    position: relative;
    background: var(--color-surface);
    padding: 0 var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    z-index: 2;
}

/* ========== UTILITY CLASSES ========== */

/* Hide bullet points - Generic utility for any list */
.hide-bullets,
.list-unstyled-custom {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.hide-bullets li,
.list-unstyled-custom li {
    list-style: none !important;
    list-style-type: none !important;
}

/* Image container - Generic responsive image constraint */
.img-container {
    max-width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.img-container img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    border-radius: var(--radius-md);
}

/* Generic responsive image utilities */
.img-responsive {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

.img-contained {
    max-width: 750px; /* Increased from 600px to make it bigger */
    margin: 0 auto;
}

/* Content spacing utilities - Generic for navbar offset */
.content-spaced {
    padding-top: var(--spacing-xl); /* Add top spacing to prevent navbar overlap */
}

.section-spaced {
    padding-top: var(--spacing-2xl); /* Larger spacing for main sections */
}

/* Spacing utilities */
.mt-lg {
    margin-top: var(--spacing-2xl) !important;
}

.mr-sm {
    margin-right: var(--spacing-sm) !important;
}

.mb-xl {
    margin-bottom: var(--spacing-2xl) !important;
}

/* ========== CONTENT SECTIONS ========== */

/* Section Base - Reusable for all content sections */
.section-base {
    padding: var(--spacing-2xl) 0;
}

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

/* Section Headers - Reusable for all content titles */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Hero Content - Reusable for about/hero sections */
.hero-content {
    margin-bottom: var(--spacing-2xl);
}

.hero-text {
    text-align: center;
}

.hero-text h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin-bottom: var(--spacing-xl);
}

.hero-image {
    margin-top: var(--spacing-xl);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    display: flex;
    justify-content: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

/* Content Sections - Reusable for any content area */
.content-area {
    margin-top: var(--spacing-2xl);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.content-area h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-primary);
}

.content-text {
    font-size: var(--font-size-lg);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
}

/* Feature Lists - Reusable for benefits/features sections */
.feature-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid #e9ecef;
    list-style: none !important;
    list-style-type: none !important;
}

.feature-item:last-child {
    border-bottom: none;
}

.feature-item i {
    flex-shrink: 0;
    margin-top: 2px;
    margin-right: var(--spacing-sm);
    color: var(--color-primary);
}

.feature-item strong {
    color: var(--color-text-primary);
}

/* Utility spacing classes */
.mt-lg {
    margin-top: var(--spacing-2xl) !important;
}

.mr-sm {
    margin-right: var(--spacing-sm) !important;
}

/* ========== PROFILE & LISTING COMPONENTS ========== */

/* Profile hero section - Generic for any profile/detail page */
.profile-hero {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-surface);
    padding: var(--spacing-2xl) 0;
}

.profile-card {
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-xl);
}

.profile-header {
    display: flex;
    align-items: center;
    padding: var(--spacing-2xl);
    gap: var(--spacing-xl);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-surface);
}

.profile-logo {
    flex: 0 0 auto;
}

.profile-logo img {
    width: 120px;
    height: 120px;
    border-radius: var(--border-radius-md);
    object-fit: cover;
    border: 4px solid var(--color-surface);
    box-shadow: var(--shadow-md);
}

.profile-info {
    flex: 1;
}

.profile-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
    color: var(--color-surface);
    line-height: 1.2;
}

.profile-location {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
    color: var(--color-surface);
    opacity: 0.9;
    line-height: 1.5;
}

.profile-location i {
    margin-top: 2px;
    flex: 0 0 auto;
}

.profile-details {
    padding: var(--spacing-2xl);
    border-top: 1px solid var(--border-light);
}

.profile-details h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

/* Grid layouts - Generic for any listing page */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.content-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.content-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

/* Enhanced cards - Generic for any content card */
.card-enhanced {
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    border: none;
}

.card-enhanced:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.card-enhanced .card-img-top {
    height: 200px;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.card-enhanced:hover .card-img-top {
    transform: scale(1.05);
}

/* Card primary header - Generic for any card with primary-colored header */
.card-primary-header {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    padding: var(--spacing-xl);
    margin: calc(var(--spacing-xl) * -1) calc(var(--spacing-xl) * -1) var(--spacing-xl);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

/* Progress indicators - Generic for any progress display */
.progress-display {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--bg-light);
    border-radius: var(--border-radius-md);
}

.progress-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: conic-gradient(var(--color-primary) calc(var(--progress, 0) * 1%), var(--border-light) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
}

.progress-circle::before {
    content: '';
    position: absolute;
    width: 75%;
    height: 75%;
    background: var(--color-surface);
    border-radius: 50%;
}

.progress-circle span {
    position: relative;
    z-index: 1;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

/* Stats badge - Generic for count displays */
.stats-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.stats-number {
    width: 80px;
    height: 80px;
    background: var(--color-primary);
    color: var(--color-surface);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
}

.stats-number-lg {
    width: 100px;
    height: 100px;
    font-size: 2rem;
    border-radius: 16px;
}

.stats-number-sm {
    width: 60px;
    height: 60px;
    font-size: 1.25rem;
    border-radius: 10px;
}

.stats-label {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1.2;
}

/* Status badges - Generic for any status display */
.status-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    min-height: 80px;
    padding: var(--spacing-sm);
    background: var(--color-primary);
    color: var(--color-surface);
    border-radius: 12px;
    font-weight: var(--font-weight-bold);
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
}

.status-badge-lg {
    min-width: 100px;
    min-height: 100px;
    border-radius: 16px;
    font-size: var(--font-size-lg);
}

.status-badge-sm {
    min-width: 60px;
    min-height: 60px;
    border-radius: 10px;
    font-size: var(--font-size-sm);
}

/* Status badge variants */
.status-badge-success {
    background: var(--color-primary);
    color: var(--color-surface);
}

.status-badge-info {
    background: var(--color-blue);
    color: var(--color-surface);
}

.status-badge-warning {
    background: #f59e0b;
    color: var(--color-surface);
}

.status-badge-danger {
    background: #ef4444;
    color: var(--color-surface);
}

.status-badge-secondary {
    background: #6b7280;
    color: var(--color-surface);
}

/* Payment status specific badges */
.status-badge-cancelled {
    background: #dc3545;
    color: var(--color-surface);
}

.status-badge-pending {
    background: #ffc107;
    color: #000;
}

.status-badge-failed {
    background: #dc3545;
    color: var(--color-surface);
}

/* Button-style cancelled badge that matches download button size */
.btn-cancelled {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 0.375rem;
    border: 2px solid #dc3545;
    background: transparent;
    color: #dc3545;
    text-decoration: none;
    cursor: default;
    transition: all 0.15s ease-in-out;
}

.btn-cancelled:hover {
    background: #dc3545;
    color: white;
}

/* Compact year badge with lighter styling */
.status-badge-year {
    background: #f8f9fa;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Smaller status badges for compact display */
.status-badge-compact {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* ========================================
   CAUSE CARDS COMPONENT
   ======================================== */

/* Date badge overlay on card images - Centered Status Badge Style */
.card-date-badge {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-align: center;
    min-width: 80px;
    backdrop-filter: blur(10px);
    border: 2px solid var(--color-primary);
}

.card-date-badge .date-day {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    display: block;
}

.card-date-badge .date-month {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    margin-top: 0.25rem;
    display: block;
}

.card-date-badge .date-year {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    line-height: 1;
    margin-top: 0.25rem;
    display: block;
}

/* Cause metadata styling */
.cause-meta-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}

.cause-meta-item i {
    flex-shrink: 0;
    width: 16px;
}

/* Card actions styling */
.card-actions .btn-group .btn {
    border-radius: 0;
}

.card-actions .btn-group .btn:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.card-actions .btn-group .btn:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

/* Card image wrapper */
.card-img-wrapper {
    overflow: hidden;
}

.card-img-wrapper .card-img-top {
    transition: transform 0.3s ease;
}

.card:hover .card-img-wrapper .card-img-top {
    transform: scale(1.05);
}

/* Enhanced card hover effects */
.card-elevated:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-elevated:hover .card-date-badge {
    transform: scale(1.05);
}

/* Badge text styling */
.status-badge .badge-number {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    margin-bottom: 2px;
}

.status-badge .badge-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.95;
}

.status-badge-lg .badge-number {
    font-size: 2rem;
}

.status-badge-sm .badge-number {
    font-size: 1.25rem;
}

.status-badge-lg .badge-label {
    font-size: 0.75rem;
}

.status-badge-sm .badge-label {
    font-size: 0.65rem;
}

/* Wide content container - Generic for wider layouts */
.content-wide {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.content-standard {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* Enhanced card body - Generic for spacious cards */
.card-body-spacious {
    padding: 2rem !important;
}

@media (max-width: 768px) {
    .card-body-spacious {
        padding: 1.5rem !important;
    }
    
    .stats-number {
        width: 70px;
        height: 70px;
        font-size: 1.25rem;
    }
}

/* ========== HERO SECTIONS ========== */

/* Hero section with gradient background - Generic for any hero */
.hero-gradient {
    background: linear-gradient(135deg, #3b82f6 0%, var(--color-primary) 100%);
    color: #fff;
    padding: var(--spacing-3xl) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.85) 0%, rgba(25, 135, 84, 0.85) 100%);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    color: #fff;
}

.hero-content * {
    color: #fff !important;
}

/* Override hero white text for countdown container */
.hero-content .countdown-container * {
    color: initial !important;
}

.hero-content .countdown-header {
    color: #333 !important;
}

.hero-content .countdown-header i {
    color: var(--color-primary) !important;
}

.hero-content .timer-number {
    color: var(--color-primary) !important;
}

.hero-content .timer-label {
    color: #666 !important;
}

.hero-content .timer-separator {
    color: var(--color-primary) !important;
}

.hero-title {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: #fff !important;
    margin-bottom: var(--spacing-xl);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-gradient {
        padding: var(--spacing-2xl) 0;
    }
}

/* ========== COUNTDOWN COMPONENTS ========== */

/* Countdown timer - Generic for any countdown display */
.countdown-container {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    padding: var(--spacing-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 0 auto;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.countdown-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    color: #333 !important;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: var(--font-size-sm);
}

.countdown-header i {
    color: var(--color-primary) !important;
    font-size: 1rem;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.timer-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
}

.timer-number {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary) !important;
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.timer-label {
    font-size: 0.75rem;
    color: #666 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: var(--font-weight-semibold);
}

.timer-separator {
    font-size: 2.5rem;
    color: var(--color-primary) !important;
    font-weight: var(--font-weight-bold);
    margin: 0 var(--spacing-sm);
    line-height: 1;
}

@media (max-width: 576px) {
    .timer-number {
        font-size: 2rem;
    }
    
    .timer-separator {
        font-size: 1.5rem;
    }
    
    .countdown-timer {
        gap: var(--spacing-sm);
    }
}

/* ========== INFO CARDS ========== */

/* Info items - Generic for any icon + text info display */
.info-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-left: 3px solid var(--color-primary);
    background: var(--bg-light);
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}

.info-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    color: var(--color-surface);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.info-content {
    flex: 1;
}

.info-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
}

.info-value {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

/* Trust indicators - Generic for any trust/verification display */
.trust-indicators {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-light);
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
}

.trust-item i {
    color: var(--color-primary);
    font-size: 1.2rem;
}

.progress-info {
    flex: 1;
}

.progress-label {
    display: block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.progress-status {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* Empty states - Generic for any empty content */
.empty-state {
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-xl);
    color: var(--color-text-secondary);
}

.empty-state i {
    font-size: 4rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
    display: block;
}

.empty-state h4 {
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.empty-state p {
    margin-bottom: var(--spacing-lg);
}

/* Action groups - Generic for grouped actions */
.action-group {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-lg);
    }
    
    .content-grid {
        grid-template-columns: 1fr;
    }
    
    .action-group {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ========== FOOTER COMPONENTS ========== */

/* Main site footer - Dark themed (targets the actual footer class used in template) */
.page-footer,
.site-footer {
    background-color: #212529 !important; /* Match Bootstrap 5 bg-dark color exactly */
    color: #ecf0f1 !important;
    margin-top: auto;
    padding: var(--spacing-lg) 0 !important;
}

/* Footer bottom section styling */
.main-footer-bottom-section {
    background-color: #212529 !important; /* Match Bootstrap 5 bg-dark for consistency */
    padding: var(--spacing-md) 0;
}

.footer-bottom-left-said {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.footer-bottom-left-said li {
    list-style: none !important;
    list-style-type: none !important;
}

.footer-bottom-left-said span {
    color: #95a5a6 !important;
    font-size: var(--font-size-sm);
}

.footer-bottom-left-said a {
    color: var(--color-primary) !important;
    text-decoration: none;
}

.footer-bottom-left-said a:hover {
    color: #5dbe4a !important;
    text-decoration: underline;
}

/* Footer main section */
.footer-main {
    padding: var(--spacing-2xl) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
}

/* Footer sections */
.footer-section {
    display: flex;
    flex-direction: column;
}

.footer-section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: #ffffff;
    margin-bottom: var(--spacing-md);
    position: relative;
}

.footer-section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--color-primary);
}

/* Footer logo */
.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-decoration: none;
}

.footer-logo:hover,
.footer-logo:focus {
    color: #5dbe4a;
    text-decoration: none;
}

.footer-logo-icon {
    margin-right: var(--spacing-sm);
    font-size: var(--font-size-2xl);
}

.footer-description {
    color: #bdc3c7;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

/* Footer navigation */
.footer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav-item {
    margin-bottom: var(--spacing-sm);
}

.footer-nav-link {
    color: #bdc3c7;
    text-decoration: none;
    transition: color var(--transition);
    display: inline-flex;
    align-items: center;
}

.footer-nav-link:hover,
.footer-nav-link:focus {
    color: var(--color-primary);
    text-decoration: none;
}

.footer-nav-link-icon {
    margin-right: var(--spacing-xs);
    width: 16px;
    opacity: 0.7;
}

/* Contact information */
.footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
    color: #bdc3c7;
}

.footer-contact-icon {
    margin-right: var(--spacing-sm);
    margin-top: 2px;
    color: var(--color-primary);
    width: 20px;
    text-align: center;
}

.footer-contact-text {
    flex: 1;
    line-height: 1.5;
}

.footer-contact-link {
    color: #bdc3c7;
    text-decoration: none;
    transition: color var(--transition);
}

.footer-contact-link:hover,
.footer-contact-link:focus {
    color: var(--color-primary);
    text-decoration: none;
}

/* Social media links */
.footer-social {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    text-decoration: none;
    border-radius: 50%;
    transition: all var(--transition);
}

.footer-social-link:hover,
.footer-social-link:focus {
    background-color: var(--color-primary);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
}

/* Newsletter signup */
.footer-newsletter {
    margin-top: var(--spacing-md);
}

.footer-newsletter-form {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.footer-newsletter-input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    color: #ffffff;
    font-family: var(--font-family);
    transition: all var(--transition);
}

.footer-newsletter-input::placeholder {
    color: #95a5a6;
}

.footer-newsletter-input:focus {
    outline: 0;
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(87, 184, 70, 0.25);
}

.footer-newsletter-button {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    color: #ffffff;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.footer-newsletter-button:hover,
.footer-newsletter-button:focus {
    background-color: #4a9d3a;
    border-color: #4a9d3a;
}

/* Footer bottom section */
.footer-bottom {
    padding: var(--spacing-md) 0;
    background-color: rgba(0, 0, 0, 0.2);
}

.footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.footer-copyright {
    color: #95a5a6;
    font-size: var(--font-size-sm);
    margin: 0;
}

.footer-copyright-link {
    color: var(--color-primary);
    text-decoration: none;
}

.footer-copyright-link:hover,
.footer-copyright-link:focus {
    text-decoration: underline;
}

.footer-bottom-links {
    display: flex;
    gap: var(--spacing-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-bottom-link {
    color: #95a5a6;
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition);
}

.footer-bottom-link:hover,
.footer-bottom-link:focus {
    color: var(--color-primary);
    text-decoration: none;
}

/* Back to top button / Scroll top button - Generic utility */
.back-to-top,
.scroll-top {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    width: 50px;
    height: 50px;
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition);
    z-index: 1020;
    box-shadow: var(--shadow-lg);
}

/* Show button when scrolled */
.back-to-top.visible,
.scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus,
.scroll-top:hover,
.scroll-top:focus {
    background-color: #4a9d3a !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

/* Generic button color utilities */
.btn-primary-green {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
}

.btn-primary-green:hover,
.btn-primary-green:focus {
    background-color: #4a9d3a !important;
    border-color: #4a9d3a !important;
    color: #ffffff !important;
}

/* Responsive footer design */
@media (max-width: 767.98px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .footer-main {
        padding: var(--spacing-lg) 0;
    }
    
    .footer-newsletter-form {
        flex-direction: column;
    }
    
    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-bottom-links {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .footer-section-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-section {
        text-align: center;
    }
    
    .footer-social {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .hero-text h3 {
        font-size: var(--font-size-xl);
    }
    
    .section-title {
        font-size: var(--font-size-xl);
    }
    
    .content-area h3 {
        font-size: var(--font-size-lg);
    }
}

/* ========== LAYOUT UTILITIES ========== */

/* Container utilities - Consistent max-width for all sections */
.container-limited {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 var(--spacing-lg) !important;
}

/* Row and column utilities - Remove extra Bootstrap padding */
.row-flush {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.col-flush {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Load more button styling - Reusable for pagination/loading */
.load-more-btn {
    display: inline-block;
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-primary);
    color: #ffffff;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition);
    border: none;
    cursor: pointer;
    font-size: var(--font-size-base);
}

.load-more-btn:hover,
.load-more-btn:focus {
    background: #4a9d3a;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Social media brand colors - Reusable for social login buttons */
.social-facebook {
    background-color: #3b5998 !important;
    border-color: #3b5998 !important;
}

.social-twitter {
    background-color: #1da1f2 !important;
    border-color: #1da1f2 !important;
}

.social-google {
    background-color: #db4437 !important;
    border-color: #db4437 !important;
}

.social-microsoft {
    background-color: #00a1f1 !important;
    border-color: #00a1f1 !important;
}

/* Legacy theme class compatibility - Graceful fallback */
.Theme-title {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.Theme-title h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.Theme-title h6 {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
    margin: 0;
}

/* Recent Causes Section - Legacy compatibility */
.Recent-Causes-Section {
    padding: var(--spacing-2xl) 0;
    background: #f8f9fa;
}

/* Content wrapper utility */
.content-wrapper {
    position: relative;
    overflow: hidden;
    margin-top: 50px;
}

.content {
    margin-top: 50px;
    margin-bottom: 50px;
    padding-bottom: 50px;
}

/* Hover float shadow effect - Reusable for cards/buttons */
.hvr-float-shadow {
    transition: all var(--transition);
}

.hvr-float-shadow:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* ========== CAUSES COMPONENTS ========== */

/* Owl Carousel fixes - Reusable for any carousel */
.owl-carousel .owl-item {
    background: transparent !important;
    opacity: 1 !important;
    display: table-cell;
    vertical-align: top;
}

.owl-carousel .owl-item > div {
    background: transparent;
}

.owl-carousel {
    overflow: visible !important;
}

.owl-stage-outer {
    overflow: hidden;
}

.owl-carousel:empty::after {
    content: "No items to display";
    display: block;
    width: 100%;
    height: 200px;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    text-align: center;
    line-height: 200px;
    color: #666;
}

/* Recent Causes Item Wrapper - Reusable carousel container */
.Recent-Causes-Item-Wrapper {
    position: relative;
    margin-bottom: var(--spacing-xl);
}

.Recent-Causes-Item-Wrapper .item {
    padding: var(--spacing-sm);
    background: transparent;
}

/* Cause Cards - Reusable for all cause displays */
.Causes-Item {
    background: #ffffff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.Causes-Item:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.owl-carousel .owl-item .Causes-Item {
    margin: 0 !important;
    height: auto;
}

/* Cause Image - Reusable for all cause image containers */
.Causes-Img {
    position: relative;
    overflow: hidden;
    height: 220px;
    flex: 0 0 auto;
}

.Causes-Img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all var(--transition);
}

.Causes-Item:hover .Causes-Img img {
    transform: scale(1.05);
}

/* Cause Text Content - Reusable for all cause content */
.Causes-Text {
    padding: var(--spacing-xl);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.Causes-Text h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
}

.Causes-Text ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-md) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.Causes-Text ul li {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.Causes-Text p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
    flex: 1;
}

.Causes-Text a {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary);
    color: #ffffff;
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-right: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    transition: all var(--transition);
}

.Causes-Text a:hover {
    background: #4a9d3a;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

.Causes-Text a i {
    margin-right: var(--spacing-xs);
}

/* Progress Chart - Reusable donation progress indicator */
.donate-piechart {
    display: inline-block;
}

.piechart {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: conic-gradient(var(--color-primary) 0deg, #f8f9fa 0deg);
}

.piechart span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

/* Button Float Shadow Effect - Reusable for enhanced buttons */
.btn--float-shadow {
    transition: all var(--transition);
}

.btn--float-shadow:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Social button group */
.social-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1rem;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    color: white;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 1.25rem;
}

.social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: white;
    text-decoration: none;
}

.social-btn-google {
    background: linear-gradient(45deg, #dd4b39, #ea4335);
}

.social-btn-microsoft {
    background: linear-gradient(45deg, #0078d4, #106ebe);
}

.social-btn-facebook {
    background: linear-gradient(45deg, #3b5998, #4267b2);
}

.social-btn-twitter {
    background: linear-gradient(45deg, #1da1f2, #0d8bd9);
}

/* Background utilities */
.bg-gradient-light {
    background: #f8f9fa;
    /* background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%); - Removed gradient for cleaner look */
}

.bg-clean-light {
    background: #f8f9fa;
}

/* Responsive utilities */
@media (max-width: 576px) {
    .section-fullheight {
        padding: 1rem;
    }
    
    .text-center-header h1,
    .text-center-header h2 {
        font-size: 1.5rem;
    }
    
    .card-elevated .card-body {
        padding: 2rem 1.5rem;
    }
}

/* Responsive auth adjustments */
@media (max-width: 576px) {
    .auth-section {
        padding: 1rem;
    }
    
    .auth-header__title {
        font-size: 1.5rem;
    }
    
    .card-auth .card-body {
        padding: 2rem 1.5rem;
    }
}

/* This design system provides:
   
   1. Consistent color palette with semantic naming
   2. Proportional spacing system based on 4px grid
   3. Typography scale optimized for web readability
   4. Border radius system for consistent roundness
   5. Shadow system for depth and elevation
   6. Transition system for smooth interactions
   7. Component-specific variables for reusability
   8. Utility classes for common patterns
   
   Usage Guidelines:
   - Always use CSS custom properties instead of hard-coded values
   - Follow mobile-first responsive design principles
   - Ensure touch targets are minimum 44px for accessibility
   - Use semantic color names (primary, success, error) over specific colors
   - Apply consistent spacing using the spacing scale
   - Implement proper focus management for accessibility
   - Test in high contrast mode and with reduced motion preferences
*/

/* ===============================================
   PROFILE FORM COMPONENTS
   =============================================== */

/* Timezone section with enhanced background - Generic for form sections needing subtle highlight */
.timezone-section {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.02) 0%, rgba(32, 201, 151, 0.01) 100%);
    border-color: rgba(23, 162, 184, 0.1);
}

/* Bootstrap Select customization - Generic for all select picker components */
.profile-form .selectpicker {
    width: 100% !important;
}

.bootstrap-select .dropdown-toggle {
    background: #ffffff;
    border: 1px solid #cad1d7;
    border-radius: 0.375rem;
    color: #32325d;
    font-size: 0.875rem;
    padding: 0.625rem 0.75rem;
    line-height: 1.5;
    min-height: var(--form-height-md);
    transition: var(--transition-colors);
}

.bootstrap-select .dropdown-toggle:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus-primary);
    outline: 0;
}

.bootstrap-select .dropdown-menu {
    border: 1px solid #e3ebf0;
    border-radius: 0.375rem;
    box-shadow: 0 10px 40px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
    max-height: 200px;
    overflow-y: auto;
    z-index: var(--z-index-dropdown);
}

.bootstrap-select .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    transition: all 0.15s ease;
    color: var(--color-text);
    background-color: transparent;
}

.bootstrap-select .dropdown-item:hover,
.bootstrap-select .dropdown-item:focus {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

.bootstrap-select .dropdown-item.active {
    background-color: var(--color-primary);
    color: #ffffff;
}
/* Apple Pay button styling */
.apple-pay-button {
	display: flex;
	align-items: center;
	background: #000;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	transition: background 0.2s;
}
.apple-pay-button:hover {
	background: #222;
}
.apple-pay-icon {
	margin-right: 8px;
	width: 24px;
	height: 24px;
	display: inline-block;
	vertical-align: middle;
}