/* ===============================================
   CRYPDU DONATE PLUGIN - CONSOLIDATED FRONTEND CSS
   Auto-generated consolidated file
   =============================================== */

/* ========== frontend\layers.css ========== */
/* ===============================================
   CSS LAYERS - MODERN CASCADE ORGANIZATION
   Organizes CSS cascade with explicit layer ordering
   =============================================== */

/* ===============================================
   LAYER DEFINITIONS
   Define the cascade order explicitly
   =============================================== */

@layer reset, tokens, base, layout, components, utilities, overrides;

/* ===============================================
   RESET LAYER
   Basic resets and normalizations
   =============================================== */

@layer reset {
  /* Modern CSS reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  /* Scoped CSS reset - only applies within plugin containers */
  .crypto-donation-container *,
  .crypto-donation-widget *,
  .crypto-donation-modal *,
  [id*="crypto-donation"] *,
  div.crypto-donation-container * {
    margin: 0;
  }
  
  .crypto-donation-container,
  .crypto-donation-widget,
  .crypto-donation-modal,
  [id*="crypto-donation"],
  div.crypto-donation-container {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  
  .crypto-donation-container img,
  .crypto-donation-container picture,
  .crypto-donation-container video,
  .crypto-donation-container canvas,
  .crypto-donation-container svg,
  .crypto-donation-widget img,
  .crypto-donation-widget picture,
  .crypto-donation-widget video,
  .crypto-donation-widget canvas,
  .crypto-donation-widget svg,
  .crypto-donation-modal img,
  .crypto-donation-modal picture,
  .crypto-donation-modal video,
  .crypto-donation-modal canvas,
  .crypto-donation-modal svg {
    display: block;
    max-width: 100%;
  }
  
  html body div.crypto-donation-container input:not([type="button"]):not([type="submit"]),
  .crypto-donation-container button,
  .crypto-donation-container textarea,
  .crypto-donation-container select,
  .crypto-donation-widget input,
  .crypto-donation-widget button,
  .crypto-donation-widget textarea,
  .crypto-donation-widget select,
  .crypto-donation-modal input,
  .crypto-donation-modal button,
  .crypto-donation-modal textarea,
  .crypto-donation-modal select {
    font: inherit;
  }
  
  .crypto-donation-container p,
  .crypto-donation-container h1,
  .crypto-donation-container h2,
  .crypto-donation-container h3,
  .crypto-donation-container h4,
  .crypto-donation-container h5,
  .crypto-donation-container h6,
  .crypto-donation-widget p,
  .crypto-donation-widget h1,
  .crypto-donation-widget h2,
  .crypto-donation-widget h3,
  .crypto-donation-widget h4,
  .crypto-donation-widget h5,
  .crypto-donation-widget h6,
  .crypto-donation-modal p,
  .crypto-donation-modal h1,
  .crypto-donation-modal h2,
  .crypto-donation-modal h3,
  .crypto-donation-modal h4,
  .crypto-donation-modal h5,
  .crypto-donation-modal h6 {
    overflow-wrap: break-word;
  }
}

/* ===============================================
   TOKENS LAYER
   Design tokens and CSS custom properties
   =============================================== */

@layer tokens {
  /* tokens.css imported globally via main.css */
}

/* ===============================================
   BASE LAYER
   Base element styles
   =============================================== */

@layer base {
  html {
    color-scheme: light dark;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  
  body {
    background: var(--surface-primary);
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.6;
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.2;
  }
  
  a {
    color: var(--primary-500);
    text-decoration: none;
  }
  
  a:hover {
    color: var(--primary-600);
    text-decoration: underline;
  }
  
  button {
    cursor: pointer;
    border: none;
    background: none;
  }
  
  input,
  textarea,
  select {
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    background: var(--surface-secondary);
    color: var(--text-primary);
  }
}

/* ===============================================
   LAYOUT LAYER
   Layout-related styles
   =============================================== */

@layer layout {
  .container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-md);
  }
  
  .grid {
    display: grid;
    gap: var(--space-md);
  }
  
  .flex {
    display: flex;
    gap: var(--space-sm);
  }
  
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
}

/* ===============================================
   COMPONENTS LAYER
   Component-specific styles
   =============================================== */

@layer components {
  /* Component styles imported directly via main.css */
  /* Removed duplicate imports: crypto-buttons.css, modals.css, ui-components.css */
}

/* ===============================================
   UTILITIES LAYER
   Utility classes
   =============================================== */

@layer utilities {
  /* Spacing utilities */
  .m-0 { margin: 0; }
  .p-0 { padding: 0; }
  
  /* Display utilities */
  .hidden { display: none; }
  .block { display: block; }
  .inline { display: inline; }
  .inline-block { display: inline-block; }
  .flex { display: flex; }
  .grid { display: grid; }
  
  /* Text utilities */
  .text-center { text-align: center; }
  .text-left { text-align: start; }
  .text-right { text-align: end; }
  
  /* Color utilities */
  .text-primary { color: var(--text-primary); }
  .text-secondary { color: var(--text-secondary); }
  .text-muted { color: var(--text-muted); }
  
  /* Background utilities */
  .bg-primary { background: var(--surface-primary); }
  .bg-secondary { background: var(--surface-secondary); }
  
  /* Border utilities */
  .border { border: 1px solid var(--border-primary); }
  .border-0 { border: none; }
  .rounded { border-radius: var(--radius-md); }
  .rounded-full { border-radius: 50%; }
  
  /* Shadow utilities */
  .shadow-sm { box-shadow: var(--shadow-sm); }
  .shadow-md { box-shadow: var(--shadow-md); }
  .shadow-lg { box-shadow: var(--shadow-lg); }
  
  /* Accessibility utilities */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  .focus-visible:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
  }
}

/* ===============================================
   OVERRIDES LAYER
   High-priority overrides and exceptions
   =============================================== */

@layer overrides {
  /* WordPress compatibility overrides */
  .crypto-donation-widget * {
    box-sizing: border-box;
  }
  
  /* Force important styles when needed */
  .force-hidden {
    display: none !important;
  }
  
  .force-visible {
    display: block !important;
  }
  
  /* Accessibility overrides */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
  
  @media (prefers-contrast: high) {
    * {
      outline-width: 3px !important;
    }
  }
}

/* ===============================================
   LAYER USAGE EXAMPLES
   How to use layers in other CSS files
   =============================================== */

/*
Example usage in component files:

@layer components {
  .my-component {
    // component styles here
  }
}

Example usage for utilities:

@layer utilities {
  .my-utility {
    // utility styles here
  }
}

Example usage for overrides:

@layer overrides {
  .important-override {
    // high-priority styles here
  }
}
*/

/* ========== shared\tokens.css ========== */
/* ===============================================
   Crypdu Donate - UNIFIED DESIGN TOKENS
   Single source of truth for all design tokens
   Eliminates duplication between admin/frontend
   =============================================== */

:root {
    /* ===============================================
       CORE COLOR SYSTEM
       Unified color palette for consistency
       =============================================== */
    
    /* Brand Colors - Primary Blue Scale */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    
    /* Neutral Colors - Complete Gray Scale */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Status Colors - Success (Green) */
    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-200: #a7f3d0;
    --success-300: #6ee7b7;
    --success-400: #34d399;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    
    /* Status Colors - Error (Red) */
    --error-50: #fef2f2;
    --error-100: #fee2e2;
    --error-200: #fecaca;
    --error-300: #fca5a5;
    --error-400: #f87171;
    --error-500: #ef4444;
    --error-600: #dc2626;
    --error-700: #b91c1c;
    
    /* Status Colors - Warning (Amber) */
    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    
    /* ===============================================
       UNIFIED SPACING SYSTEM
       Consolidates --space-*, --ui-gap-*, --crypto-spacing-*
       =============================================== */
    
    --space-3xs: 1px;  /* 0.0625rem */
    --space-2xs: 2px;  /* 0.125rem */
    --space-xs: 4px;   /* 0.25rem */
    --space-sm: 8px;   /* 0.5rem */
    --space-md: 12px;  /* 0.75rem */
    --space-lg: 16px;  /* 1rem */
    --space-xl: 20px;  /* 1.25rem */
    --space-2xl: 24px; /* 1.5rem */
    --space-3xl: 32px; /* 2rem */
    --space-4xl: 48px; /* 3rem */
    --space-5xl: 64px; /* 4rem */
    
    /* Size tokens */
    --size-1: 4px;   /* 0.25rem */
    --size-2: 8px;   /* 0.5rem */
    --size-3: 12px;  /* 0.75rem */
    --size-4: 16px;  /* 1rem */
    --size-4-5: 18px; /* 1.125rem */
    --size-5: 20px;  /* 1.25rem */
    --size-6: 24px;  /* 1.5rem */
    --size-7: 28px;  /* 1.75rem */
    --size-8: 32px;  /* 2rem */
    --size-9: 36px;  /* 2.25rem */
    --size-10: 40px; /* 2.5rem */
    --size-11: 44px; /* 2.75rem */
    --size-12: 48px; /* 3rem */
    
    /* ===============================================
       UNIFIED BORDER RADIUS SYSTEM
       Consolidates --radius-*, --ui-radius-*, --crypto-border-radius-*
       =============================================== */
    
    --radius-xs: 3px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;
    
    /* ===============================================
       UNIFIED TRANSITION SYSTEM
       Consolidates scattered transition definitions
       =============================================== */
    
    --duration-fast: 0.15s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;
    
    --ease-linear: linear;
    --ease-out: ease-out;
    --ease-in: ease-in;
    --ease-in-out: ease-in-out;
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-bounce: cubic-bezier(0.165, 0.84, 0.44, 1);
    
    --transition-fast: all var(--duration-fast) var(--ease-out);
    --transition-normal: all var(--duration-normal) var(--ease-out);
    --transition-slow: all var(--duration-slow) var(--ease-out);
    --transition-smooth: all var(--duration-normal) var(--ease-smooth);
    --transition-bouncy: all 0.4s var(--ease-bounce);
    
    /* ===============================================
       UNIFIED GRID SYSTEM
       Standardized breakpoints for responsive grid layouts
       =============================================== */
    
    /* Grid Column Widths */
    --grid-col-xs: 150px;  /* Extra small columns */
    --grid-col-sm: 200px;  /* Small columns */
    --grid-col-md: 250px;  /* Medium columns */
    --grid-col-lg: 300px;  /* Large columns */
    --grid-col-xl: 350px;  /* Extra large columns */
    --grid-col-2xl: 400px; /* 2X large columns */
    
    /* Grid Container Widths */
    --grid-container-sm: 750px;
    --grid-container-md: 900px;
    --grid-container-lg: 1000px;
    
    /* ===============================================
       UNIFIED SHADOW SYSTEM
       Consolidates shadow definitions with consistent naming
       =============================================== */
    
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.02);
    --shadow-sm: 0 1px 3px var(--rgba-black-12), 0 1px 2px var(--rgba-black-06);
    --shadow-md: 0 4px 6px var(--rgba-black-10), 0 2px 4px var(--rgba-black-06);
    --shadow-lg: 0 10px 15px var(--rgba-black-10), 0 4px 6px var(--rgba-black-05);
    --shadow-xl: 0 20px 25px var(--rgba-black-10), 0 10px 10px var(--rgba-black-04);
    --shadow-2xl: 0 25px 50px var(--rgba-black-25);
    --shadow-primary: 0 3px 8px rgba(0, 124, 186, 0.3);
    
    /* Colored Shadows */
    --shadow-primary: 0 6px 20px var(--rgba-primary-25), 0 2px 8px var(--rgba-primary-15);
    --shadow-success: 0 6px 20px var(--rgba-success-25), 0 2px 8px var(--rgba-success-15);
    --shadow-error: 0 6px 20px var(--rgba-error-25), 0 2px 8px var(--rgba-error-15);
    --shadow-warning: 0 6px 20px var(--rgba-warning-25), 0 2px 8px var(--rgba-warning-15);
    
    /* ===============================================
       SEMANTIC COLOR SYSTEM
       Unified semantic colors for consistent usage
       =============================================== */
    
    /* Surface Colors */
    --surface-primary: #ffffff;
    --surface-secondary: var(--gray-50);
    --surface-tertiary: var(--gray-100);
    --surface-overlay: var(--rgba-black-85);
    --surface-modal: var(--rgba-white-95);
    
    /* Border Colors */
    --border-light: var(--gray-300);
    --border-medium: var(--gray-400);
    --border-strong: var(--gray-500);
    --border-focus: var(--primary-500);
    --border-success: var(--success-500);
    --border-error: var(--error-500);
    --border-warning: var(--warning-500);
    
    /* Text Colors */
    --text-primary: var(--gray-800);
    --text-secondary: var(--gray-600);
    --text-tertiary: var(--gray-500);
    --text-inverse: #ffffff;
    --text-success: var(--success-700);
    --text-error: var(--error-600);
    --text-warning: var(--warning-600);
    
    /* Action Colors */
    --action-primary: var(--success-600);
    --action-primary-hover: var(--success-700);
    --action-secondary: var(--primary-500);
    --action-secondary-hover: var(--primary-600);
    --action-tertiary: var(--gray-100);
    --action-tertiary-hover: var(--gray-200);
    
    /* ===============================================
       OPTIMIZED RGBA TOKENS
       Common alpha values for consistent transparency
       =============================================== */
    
    /* White Alpha Values */
    --rgba-white-98: rgba(255, 255, 255, 0.98);
    --rgba-white-95: rgba(255, 255, 255, 0.95);
    --rgba-white-90: rgba(255, 255, 255, 0.9);
    --rgba-white-85: rgba(255, 255, 255, 0.85);
    --rgba-white-80: rgba(255, 255, 255, 0.8);
    --rgba-white-75: rgba(255, 255, 255, 0.75);
    --rgba-white-70: rgba(255, 255, 255, 0.7);
    --rgba-white-60: rgba(255, 255, 255, 0.6);
    --rgba-white-50: rgba(255, 255, 255, 0.5);
    --rgba-white-40: rgba(255, 255, 255, 0.4);
    --rgba-white-30: rgba(255, 255, 255, 0.3);
    --rgba-white-25: rgba(255, 255, 255, 0.25);
    --rgba-white-20: rgba(255, 255, 255, 0.2);
    --rgba-white-18: rgba(255, 255, 255, 0.18);
    --rgba-white-15: rgba(255, 255, 255, 0.15);
    --rgba-white-12: rgba(255, 255, 255, 0.12);
    --rgba-white-10: rgba(255, 255, 255, 0.1);
    --rgba-white-08: rgba(255, 255, 255, 0.08);
    --rgba-white-05: rgba(255, 255, 255, 0.05);
    --rgba-white-03: rgba(255, 255, 255, 0.03);
    
    /* Black Alpha Values */
    --rgba-black-90: rgba(0, 0, 0, 0.9);
    --rgba-black-85: rgba(0, 0, 0, 0.85);
    --rgba-black-60: rgba(0, 0, 0, 0.6);
    --rgba-black-50: rgba(0, 0, 0, 0.5);
    --rgba-black-25: rgba(0, 0, 0, 0.25);
    --rgba-black-20: rgba(0, 0, 0, 0.2);
    --rgba-black-15: rgba(0, 0, 0, 0.15);
    --rgba-black-12: rgba(0, 0, 0, 0.12);
    --rgba-black-10: rgba(0, 0, 0, 0.1);
    --rgba-black-08: rgba(0, 0, 0, 0.08);
    --rgba-black-06: rgba(0, 0, 0, 0.06);
    --rgba-black-05: rgba(0, 0, 0, 0.05);
    --rgba-black-04: rgba(0, 0, 0, 0.04);
    --rgba-black-02: rgba(0, 0, 0, 0.02);
    
    /* ===============================================
       DYNAMIC RGBA COLOR VARIABLES
       These are generated dynamically by color-theme-manager.js
       based on the current theme colors. They automatically
       adapt when users switch between color themes.
       
       Generated variables include:
       --rgba-primary-XX (where XX = opacity percentage)
       --rgba-success-XX, --rgba-warning-XX, --rgba-error-XX
       --rgba-purple-XX (for purple theme support)
       
       Example: --rgba-primary-15 = current primary color @ 15% opacity
;
       =============================================== */
    
    /* Gray Color Alpha Values */
    --rgba-gray-90: rgba(17, 24, 39, 0.9);
    --rgba-gray-80: rgba(31, 41, 55, 0.8);
    --rgba-gray-60: rgba(75, 85, 99, 0.6);
    --rgba-gray-50: rgba(107, 114, 128, 0.5);
    --rgba-gray-40: rgba(156, 163, 175, 0.4);
    --rgba-gray-30: rgba(209, 213, 219, 0.3);
    --rgba-gray-25: rgba(229, 231, 235, 0.25);
    --rgba-gray-20: rgba(229, 231, 235, 0.2);
    --rgba-gray-15: rgba(243, 244, 246, 0.15);
    --rgba-gray-10: rgba(243, 244, 246, 0.1);
    --rgba-gray-08: rgba(249, 250, 251, 0.08);
    --rgba-gray-05: rgba(249, 250, 251, 0.05);
    
    /* Slate Color Alpha Values */
    --rgba-slate-90: rgba(15, 23, 42, 0.9);
    --rgba-slate-50: rgba(248, 250, 252, 0.5);
    --rgba-slate-40: rgba(226, 232, 240, 0.4);
    --rgba-slate-30: rgba(203, 213, 225, 0.3);
    --rgba-slate-25: rgba(186, 200, 216, 0.25);
    --rgba-slate-20: rgba(148, 163, 184, 0.2);
    --rgba-slate-15: rgba(100, 116, 139, 0.15);
    --rgba-slate-12: rgba(100, 116, 139, 0.12);
    --rgba-slate-10: rgba(71, 85, 105, 0.1);
    --rgba-slate-08: rgba(51, 65, 85, 0.08);
    --rgba-slate-05: rgba(30, 41, 59, 0.05);
    
    /* Purple Color Alpha Values (for theme compatibility) */
    --rgba-purple-50: rgba(139, 92, 246, 0.5);
    --rgba-purple-30: rgba(139, 92, 246, 0.3);
    --rgba-purple-15: rgba(139, 92, 246, 0.15);
    --rgba-purple-10: rgba(139, 92, 246, 0.1);
    --rgba-purple-05: rgba(139, 92, 246, 0.05);
    
    /* Additional Warning Alpha Values */
    --rgba-warning-50: rgba(217, 119, 6, 0.5);
  --rgba-warning-40: rgba(217, 119, 6, 0.4);
  --rgba-warning-25: rgba(217, 119, 6, 0.25);
  --rgba-warning-15: rgba(217, 119, 6, 0.15);
  --rgba-warning-10: rgba(217, 119, 6, 0.1);
  --rgba-warning-05: rgba(217, 119, 6, 0.05);

    /* Additional slate colors */
  --rgba-slate-99: rgba(248, 250, 252, 0.99);
  --rgba-slate-98: rgba(248, 250, 252, 0.98);
  --rgba-slate-95: rgba(15, 23, 42, 0.95);
  --rgba-slate-50: rgba(226, 232, 240, 0.5);
  --rgba-slate-30: rgba(226, 232, 240, 0.3);

    /* Additional primary colors */
  --rgba-primary-30: rgba(59, 130, 246, 0.3);
  --rgba-primary-25: rgba(59, 130, 246, 0.25);
  --rgba-primary-20: rgba(59, 130, 246, 0.2);
  --rgba-primary-15: rgba(59, 130, 246, 0.15);
  --rgba-primary-08: rgba(59, 130, 246, 0.08);
  --rgba-primary-05: rgba(59, 130, 246, 0.05);
  --rgba-primary-03: rgba(59, 130, 246, 0.03);
  --rgba-primary-02: rgba(59, 130, 246, 0.02);

    /* Additional purple colors */
  --rgba-purple-15: rgba(139, 92, 246, 0.15);
  --rgba-purple-03: rgba(139, 92, 246, 0.03);
  --rgba-purple-01: rgba(139, 92, 246, 0.01);

  /* Additional error colors */
  --rgba-error-95: rgba(239, 68, 68, 0.95);
  --rgba-error-50: rgba(239, 68, 68, 0.5);

  /* Additional warning colors */
  --rgba-warning-95: rgba(245, 158, 11, 0.95);

  /* Additional success colors */
  --rgba-success-40: rgba(34, 197, 94, 0.4);
  --rgba-success-25: rgba(34, 197, 94, 0.25);
  --rgba-success-15: rgba(34, 197, 94, 0.15);
  --rgba-success-10: rgba(34, 197, 94, 0.1);
  --rgba-success-08: rgba(34, 197, 94, 0.08);
  --rgba-success-05: rgba(34, 197, 94, 0.05);
  --rgba-success-04: rgba(34, 197, 94, 0.04);
  --rgba-success-03: rgba(34, 197, 94, 0.03);

  /* Additional white colors */
  --rgba-white-95: rgba(255, 255, 255, 0.95);
  --rgba-white-80: rgba(255, 255, 255, 0.8);

  /* Additional warning colors */
  --rgba-warning-40: rgba(245, 158, 11, 0.4);
    
    /* Blue Color Alpha Values (for animations) */
    --rgba-blue-60: rgba(59, 130, 246, 0.6);
    --rgba-blue-50: rgba(59, 130, 246, 0.5);
    --rgba-blue-30: rgba(59, 130, 246, 0.3);
    --rgba-blue-15: rgba(59, 130, 246, 0.15);
    --rgba-blue-10: rgba(59, 130, 246, 0.1);
    
    /* Success Color Alpha Values (extended) */
    --rgba-success-40: rgba(34, 197, 94, 0.4);
    --rgba-success-30: rgba(34, 197, 94, 0.3);
    --rgba-success-20: rgba(34, 197, 94, 0.2);
    
    /* Purple Color Alpha Values (extended) */
    --rgba-purple-40: rgba(139, 92, 246, 0.4);
    
    /* Error Color Alpha Values (extended) */
    --rgba-error-40: rgba(239, 68, 68, 0.4);
    --rgba-error-30: rgba(239, 68, 68, 0.3);
    --rgba-error-20: rgba(239, 68, 68, 0.2);
    --rgba-error-25: rgba(239, 68, 68, 0.25);
  --rgba-error-15: rgba(239, 68, 68, 0.15);
  --rgba-error-10: rgba(239, 68, 68, 0.1);
  --rgba-error-05: rgba(239, 68, 68, 0.05);
    
    /* ===============================================
       UNIFIED GRADIENT SYSTEM
       Consistent gradients across all components
       =============================================== */
    
    /* Primary Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    --gradient-primary-dark: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
    --gradient-primary-light: linear-gradient(135deg, var(--rgba-primary-08) 0%, var(--rgba-primary-05) 100%);
    --gradient-primary-subtle: linear-gradient(135deg, var(--primary-25) 0%, var(--primary-10) 100%);
    
    /* Secondary Gradients (Blue theme) */
    --gradient-secondary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    --gradient-secondary-dark: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
    --gradient-secondary-light: linear-gradient(135deg, var(--rgba-primary-08) 0%, var(--rgba-primary-05) 100%);
    
    /* Success Gradients */
    --gradient-success: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%);
    --gradient-success-dark: linear-gradient(135deg, var(--success-600) 0%, var(--success-700) 100%);
    --gradient-success-light: linear-gradient(135deg, var(--rgba-success-05) 0%, var(--rgba-success-03) 100%);
    
    /* Surface & Neutral Gradients */
    --gradient-surface: linear-gradient(135deg, var(--rgba-white-95) 0%, var(--surface-secondary) 100%);
    --gradient-surface-elevated: linear-gradient(135deg, var(--surface-primary) 0%, var(--surface-secondary) 100%);
    --gradient-neutral-light: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    --gradient-neutral-medium: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
    --gradient-neutral-strong: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%);
    
    /* Modal Gradients */
    --gradient-modal-title: linear-gradient(135deg, var(--modal-title-gradient-start) 0%, var(--modal-title-gradient-mid) 50%, var(--modal-title-gradient-end) 100%);
    
    /* Special Effect Gradients */
    --gradient-overlay: linear-gradient(135deg, var(--surface-overlay) 0%, var(--rgba-slate-90) 50%, var(--surface-overlay) 100%);
    --gradient-rainbow: linear-gradient(90deg, var(--primary-500) 0%, #8b5cf6 25%, var(--success-500) 50%, #f59e0b 75%, var(--primary-500) 100%);
    --gradient-error-light: linear-gradient(135deg, var(--rgba-error-10) 0%, var(--rgba-error-05) 100%);
    --gradient-warning-light: linear-gradient(135deg, var(--rgba-warning-10) 0%, var(--rgba-warning-05) 100%);
    --gradient-warning-soft: linear-gradient(135deg, var(--rgba-error-68-10) 0%, var(--rgba-error-38-05) 100%);
    --gradient-shimmer: linear-gradient(90deg, transparent 0%, var(--rgba-white-30) 50%, transparent 100%);
    --gradient-scrollbar: linear-gradient(90deg, var(--rgba-primary-30) 0%, var(--rgba-purple-30) 100%);
    --gradient-scrollbar-hover: linear-gradient(135deg, var(--rgba-primary-50) 0%, var(--rgba-purple-50) 100%);
    --gradient-surface-dark: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%);
    /* --gradient-currency-icon: Generated dynamically by color-theme-manager.js */
    --gradient-icon-shimmer: linear-gradient(45deg, transparent 30%, var(--rgba-white-10) 50%, transparent 70%);
    --gradient-reminder-box: linear-gradient(135deg, var(--rgba-warning-10) 0%, var(--rgba-warning-05) 100%);
    --gradient-reminder-line: linear-gradient(90deg, transparent 0%, var(--rgba-warning-50) 50%, transparent 100%);
    --gradient-amount-shimmer: linear-gradient(45deg, transparent 0%, var(--rgba-white-15) 50%, transparent 100%);
    --gradient-summary-badge: linear-gradient(135deg, var(--primary-25) 0%, var(--success-25) 100%);
    --gradient-summary-shimmer: linear-gradient(90deg, transparent 0%, var(--rgba-white-20) 50%, transparent 100%);
    --gradient-summary-amount: linear-gradient(135deg, var(--action-primary) 0%, var(--success-500) 50%, var(--success-400) 100%);
    --gradient-slide-prev: linear-gradient(135deg, var(--surface-primary) 0%, var(--surface-secondary) 100%);

    --gradient-crypto-icon: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-50) 100%);
    --gradient-prev-btn: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    --gradient-prev-btn-active: linear-gradient(135deg, var(--color-slate-249) 0%, var(--color-slate-240) 100%);
    --gradient-next-btn-active: linear-gradient(135deg, var(--success-600) 0%, var(--color-green-857) 100%);
    --gradient-btn-disabled: linear-gradient(135deg, var(--color-gray-235) 0%, var(--color-gray-213) 100%);
    --gradient-modal-overlay: linear-gradient(135deg, var(--rgba-black-90) 0%, var(--rgba-slate-95) 50%, var(--rgba-black-90) 100%);
    --gradient-modal-header: linear-gradient(135deg, var(--rgba-white-98) 0%, var(--rgba-slate-99) 100%);
    --gradient-modal-body: linear-gradient(135deg, var(--rgba-white-98) 0%, var(--rgba-slate-99) 100%);
    --gradient-wallet-address: linear-gradient(135deg, var(--rgba-primary-05) 0%, var(--rgba-purple-03) 100%);
    --gradient-wallet-address-active: linear-gradient(135deg, var(--rgba-primary-08) 0%, var(--rgba-purple-05) 100%);
    --gradient-modal-footer: linear-gradient(135deg, var(--rgba-white-98) 0%, var(--rgba-slate-99) 100%);
    
    /* Action Buttons Gradients */
    --gradient-donation-card-border: linear-gradient(90deg, var(--primary-500) 0%, #8b5cf6 25%, var(--success-500) 50%, #f59e0b 75%, var(--primary-500) 100%);
    --gradient-summary-total: linear-gradient(135deg, var(--rgba-primary-02) 0%, var(--rgba-purple-01) 100%);
    --gradient-btn-disabled-action: linear-gradient(135deg, var(--color-gray-235) 0%, var(--color-gray-213) 100%);
    --gradient-btn-shine: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    --gradient-prev-btn-action: linear-gradient(135deg, var(--surface-secondary) 0%, var(--color-slate-249) 100%);
    --gradient-prev-btn-hover-action: linear-gradient(135deg, var(--color-slate-249) 0%, var(--color-slate-240) 100%);
    
    /* Core-specific Line Gradients (moved from core.css) */
    --gradient-primary-line: linear-gradient(90deg, var(--rgba-primary-40) 0%, var(--rgba-primary-60) 50%, var(--rgba-primary-40) 100%);
    --gradient-success-line: linear-gradient(90deg, transparent 0%, var(--rgba-success-50) 50%, transparent 100%);
    --gradient-warning-line: linear-gradient(90deg, transparent 0%, var(--rgba-warning-60) 50%, transparent 100%);
    --gradient-neutral-line: linear-gradient(90deg, transparent 0%, var(--rgba-white-10) 50%, transparent 100%);
    --gradient-light: linear-gradient(135deg, var(--rgba-white-95) 0%, var(--rgba-white-98) 100%);
    --gradient-modal: linear-gradient(135deg, var(--rgba-black-85) 0%, var(--rgba-black-90) 50%, var(--rgba-black-85) 100%);
    --gradient-icon: linear-gradient(135deg, var(--rgba-primary-10) 0%, var(--rgba-primary-10) 100%);
    
    /* Notification gradients */
  --gradient-notification-error: linear-gradient(135deg, var(--rgba-error-242-95) 0%, var(--rgba-error-165-10) 100%);
  --gradient-notification-error-line: linear-gradient(90deg, transparent 0%, var(--rgba-error-68-50) 50%, transparent 100%);
  --gradient-notification-warning: linear-gradient(135deg, var(--rgba-warning-235-95) 0%, var(--rgba-warning-77-10) 100%);
  --gradient-notification-warning-line: linear-gradient(90deg, transparent 0%, var(--rgba-warning-158-50) 50%, transparent 100%);

  /* UI Components Gradients */
  --gradient-ui-overlay: linear-gradient(135deg, var(--surface-overlay) 0%, var(--rgba-slate-90) 50%, var(--surface-overlay) 100%);
  --gradient-ui-modal: linear-gradient(145deg, var(--surface-modal) 0%, var(--surface-secondary) 100%);
  --gradient-donation-summary: linear-gradient(135deg, var(--rgba-green-105-08) 0%, var(--rgba-green-105-04) 100%);
  /* --gradient-currency-icon-large: Generated dynamically by color-theme-manager.js */
  --gradient-success-message: linear-gradient(135deg, var(--rgba-success-05) 0%, var(--rgba-success-03) 100%);
    --gradient-report-amount: linear-gradient(135deg, var(--rgba-success-10) 0%, var(--rgba-success-05) 100%);
    --gradient-report-network: linear-gradient(135deg, var(--rgba-purple-10) 0%, var(--rgba-purple-05) 100%);
    --gradient-what-happens-next: linear-gradient(135deg, var(--rgba-primary-05) 0%, var(--rgba-primary-03) 100%);
  --gradient-step-number: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  --gradient-btn-primary-hover-ui: linear-gradient(135deg, var(--success-600) 0%, var(--success-700) 100%);

  /* Crypto Buttons Gradients */
  --gradient-crypto-btn-base: linear-gradient(135deg, var(--rgba-white-95) 0%, var(--rgba-white-98) 100%);
  --gradient-crypto-btn-selected: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%);
  --gradient-crypto-icon-hover: linear-gradient(135deg, var(--rgba-primary-15) 0%, var(--rgba-purple-15) 100%);
  --gradient-crypto-btn-shine: linear-gradient(45deg, transparent, var(--rgba-white-15), transparent);

  /* Modal Specific Gradients */
  --gradient-modal-overlay-glow: radial-gradient(circle at 50% 50%, var(--rgba-blue-246-08) 0%, transparent 70%);
  --gradient-modal-scrollbar: linear-gradient(135deg, var(--rgba-primary-30) 0%, var(--rgba-purple-30) 100%);
  --gradient-modal-scrollbar-hover: linear-gradient(135deg, var(--rgba-primary-50) 0%, var(--rgba-purple-50) 100%);
  --gradient-modal-content-top: linear-gradient(90deg, transparent 0%, var(--primary-500-50) 50%, transparent 100%);
  --gradient-modal-header-top: linear-gradient(90deg, transparent 0%, var(--primary-500-40) 25%, var(--purple-500-40) 50%, var(--cyan-500-40) 75%, transparent 100%);
  --gradient-modal-close-shine: linear-gradient(135deg, var(--rgba-white-10) 0%, transparent 50%, var(--rgba-black-05) 100%);
  --gradient-modal-close-glow: radial-gradient(circle, var(--rgba-error-68-20) 0%, transparent 70%);
  --gradient-qr-border: linear-gradient(white,white) padding-box,linear-gradient(135deg,#3b82f6 0%,#8b5cf6 50%,#06b6d4 100%) border-box;
  --gradient-wallet-address-modal: linear-gradient(135deg, var(--primary-25) 0%, var(--primary-10) 100%);
  --gradient-payment-timer: linear-gradient(135deg, var(--rgba-warning-191-08) 0%, var(--rgba-warning-158-05) 100%);
  --gradient-payment-timer-top: linear-gradient(90deg, var(--rgba-warning-191-60) 0%, var(--rgba-warning-158-80) 50%, var(--rgba-warning-191-60) 100%);
  --gradient-timer-icon: linear-gradient(135deg, var(--rgba-warning-191-20) 0%, var(--rgba-warning-158-15) 100%);
  --gradient-timer-icon-shine: linear-gradient(45deg, transparent 0%, var(--rgba-white-10) 50%, transparent 100%);
  --gradient-timer-countdown-line: linear-gradient(90deg, transparent 0%, var(--rgba-warning-40) 50%, transparent 100%);
  --gradient-copy-address-btn: linear-gradient(135deg, var(--action-secondary) 0%, var(--primary-500) 100%);
  --gradient-copy-address-btn-hover: linear-gradient(135deg, var(--action-secondary-hover) 0%, var(--primary-700) 100%);
  --gradient-copy-address-shine: linear-gradient(90deg, transparent 0%, var(--rgba-white-20) 50%, transparent 100%);
  --gradient-modal-footer-line: linear-gradient(90deg, transparent 0%, var(--modal-footer-line) 50%, transparent 100%);
  --gradient-status-shimmer: linear-gradient(45deg, transparent 30%, var(--rgba-white-05) 50%, transparent 70%);
  --gradient-success-animation-shimmer: radial-gradient(circle at 30% 20%, var(--rgba-white-20) 0%, transparent 50%);
  --gradient-success-animation-shimmer-alt: radial-gradient(circle at 70% 80%, var(--rgba-white-30) 0%, transparent 50%);
  --gradient-transaction-details-line: linear-gradient(90deg, transparent 0%, var(--success-details-line) 50%, transparent 100%);
  --gradient-manual-report-icon: linear-gradient(135deg, var(--rgba-error-10) 0%, var(--rgba-error-05) 100%);
    
    /* ===============================================
       Z-INDEX SCALE
       Consistent layering system
       =============================================== */
    
    --z-base: 1;
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-fixed: 200;
    --z-modal-backdrop: 1000;
    --z-modal: 1010;
    --z-tooltip: 1020;
    --z-notification: 1030;
    
    /* ===============================================
       TYPOGRAPHY SCALE
       Consistent font sizing and line heights
       =============================================== */
    
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-base: 1rem;    /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;   /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem;  /* 36px */
    
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Letter spacing tokens */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --font-family-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace;
    --font-mono: 'Courier New', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    
    /* ===============================================
       FOCUS RING SYSTEM
       Consistent focus indicators for accessibility
       =============================================== */
    
    --focus-ring-primary: 0 0 0 3px var(--rgba-primary-10);
    --focus-ring-success: 0 0 0 3px var(--rgba-success-10);
    --focus-ring-error: 0 0 0 3px var(--rgba-error-10);
    --focus-ring-warning: 0 0 0 3px var(--rgba-warning-10);
    
    /* ===============================================
       SEMANTIC UTILITY TOKENS
       Support for extracted inline styles
       =============================================== */
    
    /* Color Dot System - Palette-specific colors */
    --color-dot-ocean-primary: #3b82f6;
    --color-dot-ocean-secondary: #1e40af;
    --color-dot-green-primary: #059669;
    --color-dot-purple-primary: #7c3aed;
    --color-dot-orange-primary: #ea580c;
    --color-dot-golden-primary: #d97706;
    --color-dot-golden-secondary: #f59e0b;
    --color-dot-golden-error: #dc2626;
    
    /* Text Utility Colors */
    --text-muted: #6c757d;
    --text-muted-small: #666666;
    
    /* Margin Utilities */
    --margin-0: 0;
    --margin-5: 5px;
    --margin-10: 10px;
    --margin-15: 15px;
    
    /* QR Code Component Tokens */
    --qr-code-max-width: 200px;
    --qr-code-border: 1px solid var(--border-light);
    --qr-code-border-radius: var(--radius-xs);
    
    /* QR Compatibility Info Tokens */
    --qr-info-bg: #f0f8ff;
    --qr-info-padding: var(--space-lg);
    --qr-info-margin: var(--space-lg) 0;
    --qr-info-border-left: 4px solid #0073aa;
    --qr-info-border-radius: var(--radius-xs);
    
    /* Notification Icon Tokens */
    --notification-icon-color: var(--rgba-white-90);
    --notification-icon-size: 16px;
    
    /* Admin-specific Overrides */
    --admin-color-dot-size: 20px;
    --admin-qr-max-width: 150px;
    --admin-dashicon-margin: 5px;
    
    /* Performance Optimization Tokens */
    --will-change-transform: transform;
    --backface-visibility-hidden: hidden;
    
    /* Responsive Breakpoints */
    --mobile-max-width: 768px;
    
    /* Component State Tokens */
    --component-hidden: none;
    --component-visible: block;
    
    /* Border Utilities */
    --border-width-1: 1px;
    --border-style-solid: solid;
    
    /* Cursor Utilities */
    --cursor-pointer: pointer;
    --cursor-default: default;
    
    /* Width/Height Utilities */
    --width-auto: auto;
    --width-50: 50px;
    --width-100: 100px;
    --width-50: 50px;
    --width-90: 90px;
    --width-100: 100px;
    --width-110: 110px;
    --width-120: 120px;
    --width-130: 130px;
    --width-150: 150px;
    --width-160: 160px;
    --width-170: 170px;
    --width-180: 180px;
    --width-200: 200px;
    --width-280: 280px;
    --width-700: 700px;
    --width-full: 100%;
    --height-auto: auto;
    --height-24: 24px;
    --height-35: 35px;
    --height-120: 120px;
    --max-width-full: 100%;
    
    /* Padding Utilities */
    --padding-10: 10px;
    
    /* Alignment Utilities */
    --text-align-center: center;
    --text-align-left: left;
    --text-align-right: right;
    
    /* UI Component Tokens */
    --ui-gap-sm: var(--space-sm);
    --ui-gap-md: var(--space-md);
    --ui-gap-lg: var(--space-lg);
    --ui-gap-xl: var(--space-xl);
    --ui-radius-sm: var(--radius-sm);
    --ui-radius-md: var(--radius-md);
    --ui-radius-lg: var(--radius-lg);
    --ui-input-bg: var(--surface-primary);
    --ui-input-shadow: var(--shadow-xs);
    --ui-success-bg: var(--success-50);
    --ui-success-primary: var(--success-600);
    --ui-modal-bg: var(--surface-modal);
    
    /* Grid System Extensions */
    --grid-col-sm: var(--col-sm);
    --grid-col-md: var(--col-md);
    --grid-col-lg: var(--col-lg);
    --grid-col-2xl: var(--col-2xl);
    
    /* Animation & Effects */
    --backdrop-blur-medium: blur(8px);
    --duration-normal: var(--duration-300);
    --ease-out: var(--ease-out-cubic);
    
    /* Additional Color Tokens */
    --purple-500: #a855f7;
    --purple-600: #9333ea;
    --purple-700: #7c3aed;
    
    /* Gradient Extensions (using existing gradient system) */
    --gradient-btn-shine: var(--gradient-primary-light);
    --gradient-neutral-light: var(--gradient-neutral);
    --gradient-neutral-medium: var(--gradient-surface);
    --gradient-primary-light: var(--gradient-primary);
    --gradient-scrollbar: var(--gradient-neutral);
    --gradient-scrollbar-hover: var(--gradient-surface);
    --gradient-shimmer: var(--gradient-special-shimmer);
    --gradient-success-light: var(--gradient-success);
    --gradient-success-dark: var(--gradient-success);
    --gradient-surface-dark: var(--gradient-surface);
    --gradient-warning-soft: var(--gradient-modal);
    --gradient-step-number: var(--gradient-primary);
    --gradient-success-message: var(--gradient-success);
    --gradient-what-happens-next: var(--gradient-surface);
    --gradient-ui-modal: var(--gradient-modal);
    --gradient-ui-overlay: var(--gradient-modal);
    --gradient-secondary-dark: var(--gradient-secondary);
    --gradient-subtle: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

/* ========== frontend\core.css ========== */
/* ===============================================
   Crypdu Donate - CORE STYLES & VARIABLES
   Core layout, components, and functionality
   Modern CSS Architecture with Design Tokens
   Uses unified tokens from shared/tokens.css
   =============================================== */

/* tokens.css imported globally via main.css */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* ===============================================
   ACCESSIBILITY: COLOR SCHEME & DARK MODE SUPPORT
   =============================================== */

/* Declare support for light and dark color schemes */
:root {
  color-scheme: light dark;
}

/* Dark mode styles based on system preference */
@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode color overrides */
    --primary-500: #60a5fa;
    --primary-600: #3b82f6;
    --success-500: #34d399;
    --error-500: #f87171;
    --warning-500: #fbbf24;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --surface-primary: #1e293b;
    --surface-secondary: #334155;
    --border-primary: #475569;
    --border-light: #64748b;
    --border-focus: #60a5fa;
    --crypto-background: #0f172a;
    --crypto-surface-primary: #1e293b;
    --crypto-surface-secondary: #334155;
  }
  
  /* Dark mode button adjustments */
  .crypto-btn,
  .btn-base {
    background: var(--surface-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
  }
  
  /* Dark mode form adjustments */
  html body .form-input:not([type="button"]):not([type="submit"]),
  html body .input-group {
    background: var(--surface-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
  }
  
  /* Dark mode modal adjustments */
  .modal-overlay {
    background: var(--rgba-slate-80);
  }
  
  .modal-content {
    background: var(--surface-primary);
    border-color: var(--border-primary);
    color: var(--text-primary);
  }
}

/* ===============================================
   ACCESSIBILITY: HIGH CONTRAST SUPPORT
   =============================================== */

/* Enhanced styles for users who prefer high contrast */
@media (prefers-contrast: high) {
  :root {
    /* High contrast color overrides */
    --primary-500: #0000ff;
    --success-500: #008000;
    --error-500: #ff0000;
    --warning-500: #ff8c00;
    --text-primary: #000000;
    --text-secondary: #000000;
    --surface-primary: #ffffff;
    --surface-secondary: #ffffff;
    --border-primary: #000000;
    --border-focus: #0000ff;
  }
  
  /* Enhanced button contrast */
  .crypto-btn,
  .btn-base {
    border: 3px solid #000000 !important;
    background: #ffffff !important;
    color: #000000 !important;
  }
  
  .crypto-btn:hover,
  .btn-base:hover {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
  }
  
  /* Enhanced form contrast */
  html body .form-input:not([type="button"]):not([type="submit"]),
  html body .input-group {
    border: 3px solid #000000 !important;
    background: #ffffff !important;
    color: #000000 !important;
  }
  
  /* Enhanced modal contrast */
  .modal-overlay {
    background: var(--rgba-black-90) !important;
  }
  
  .modal-content {
    border: 3px solid #000000 !important;
    background: #ffffff !important;
    color: #000000 !important;
  }
  
  /* Remove subtle effects that may reduce contrast */
  .crypto-btn::before,
  .crypto-btn::after {
    display: none !important;
  }
  
  /* Enhanced focus indicators */
  *:focus-visible {
    outline: 4px solid #0000ff !important;
    outline-offset: 2px !important;
  }
}

/* ===============================================
   CSS PERFORMANCE OPTIMIZATIONS
   =============================================== */

/* Critical rendering path optimization */
.crypto-donation-widget {
  contain: layout style paint;
  will-change: auto;
}

/* Modal performance optimization */
.modal-overlay {
  contain: layout style;
  will-change: opacity, backdrop-filter;
}

.modal-content {
  contain: layout style paint;
  will-change: transform, opacity;
}

/* Animation performance optimization */
.crypto-button,
.donation-step,
.qr-code-container {
  will-change: transform;
}

.crypto-button:hover,
.donation-step.active,
.qr-code-container.loading {
  will-change: transform, box-shadow;
}

/* Remove will-change after animations complete */
.crypto-button:not(:hover),
.donation-step:not(.active),
.qr-code-container:not(.loading) {
  will-change: auto;
}

/* Notification performance */
.notification {
  contain: layout style paint;
  will-change: transform, opacity;
}

/* Grid container optimization */
.crypto-grid,
.donation-grid {
  contain: layout;
}

:root {
    /* ===========================================
       DYNAMIC THEME SYSTEM
       Uses shared tokens - no local definitions needed
       =========================================== */
    /* All crypto variables now use shared tokens directly */
    
    /* ===========================================
       STATIC DESIGN TOKEN SYSTEM
       Base colors that remain consistent
       =========================================== */
    
    /* Frontend uses shared tokens - no duplication needed */
    /* All color tokens are imported from shared/tokens.css */
    
    /* ===========================================
       UNIFIED SEMANTIC COLORS
       Consistent across all breakpoints
       =========================================== */
    
    /* Action Colors - Unified System */
    --action-primary: var(--success-600);           /* #059669 */
    --action-primary-hover: var(--success-700);     /* #047857 */
    --action-secondary: var(--primary-500);         /* #3b82f6 */
    --action-secondary-hover: var(--primary-600);   /* #2563eb */
    --action-tertiary: var(--gray-100);             /* #f3f4f6 */
    --action-tertiary-hover: var(--gray-200);       /* #e5e7eb */
    
    /* Surface Colors - Unified System */
    --surface-primary: #ffffff;
    --surface-secondary: var(--gray-50);            /* #f9fafb */
    --surface-tertiary: var(--gray-100);            /* #f3f4f6 */
    --surface-overlay: var(--rgba-black-85);
    --surface-modal: var(--rgba-white-95);
    
    /* Border Colors - Unified System */
    --border-light: var(--gray-200);                /* #e5e7eb */
    --border-medium: var(--gray-300);               /* #d1d5db */
    --border-strong: var(--gray-400);               /* #9ca3af */
    --border-focus: var(--primary-500);             /* #3b82f6 */
    --border-success: var(--success-500);           /* #10b981 */
    --border-error: var(--error-500);               /* #ef4444 */
    
    /* Text Colors - Unified System */
    --text-primary: var(--gray-800);                /* #1f2937 */
    --text-secondary: var(--crypto-text-secondary, #6b7280);              /* #4b5563 */
    --text-tertiary: var(--gray-500);               /* #6b7280 */
    --text-inverse: #ffffff;
    --text-success: var(--success-700);             /* #047857 */
    --text-error: var(--error-600);                 /* #dc2626 */
    --text-warning: var(--warning-600);             /* #d97706 */
    
    /* Form Element Colors - Unified System */
    --form-bg: var(--surface-modal);
    --form-border: var(--border-light);
    --form-border-focus: var(--border-focus);
    --form-border-error: var(--border-error);
    --form-text: var(--text-primary);
    --form-placeholder: var(--text-tertiary);
    
    /* Layout System - Spacing & Sizing imported from tokens.css */
    
    /* Animation System imported from tokens.css */
    
    /* Z-Index Scale - standardized with tokens.css */
    --z-base: 1; --z-dropdown: 50; --z-sticky: 100; --z-fixed: 200;
    --z-modal-backdrop: 1000; --z-modal: 1010; --z-tooltip: 1020; --z-notification: 1030;
    
    /* Shadow System - core shadows imported from tokens.css */
    /* Component-specific shadows */
    --shadow-card: 0 10px 25px var(--rgba-black-08), 0 4px 10px var(--rgba-black-04);
    --shadow-elevated: 0 16px 48px var(--rgba-black-12), 0 8px 24px var(--rgba-black-08);
    
    /* Gradient System - All gradients now centralized in shared/tokens.css */
    
    /* Enhanced Shadow System */
    --shadow-primary-hover: 0 8px 32px var(--rgba-primary-12), 0 4px 16px var(--rgba-primary-08);
    --shadow-primary-glow: 0 10px 28px var(--rgba-primary-40), 0 6px 16px var(--rgba-primary-30);
    --shadow-primary-xl: 0 24px 64px var(--rgba-primary-20), 0 12px 32px var(--rgba-primary-15);
    --shadow-success-glow: 0 10px 28px var(--rgba-success-40), 0 6px 16px var(--rgba-success-30);
    --shadow-success-light: 0 4px 12px var(--rgba-success-08);
    --shadow-warning-glow: 0 4px 16px var(--rgba-warning-10), inset 0 1px 0 var(--rgba-white-10);
    --shadow-neutral-glow: 0 10px 28px var(--rgba-gray-40), 0 6px 16px var(--rgba-gray-30);
    
    /* Legacy tokens removed - using tokens.css equivalents */
    
    /* Legacy RGBA tokens - now using optimized shared tokens */
    /* Most RGBA values are now imported from shared/tokens.css */
    
    /* Modal-specific Color Tokens */
    --modal-overlay-bg: var(--rgba-black-85);
    --modal-overlay-secondary: var(--rgba-slate-90);
    --modal-content-bg: var(--rgba-white-95);
    --modal-content-border: var(--rgba-white-18);
    --modal-header-bg: var(--gradient-surface);
    --modal-header-text: var(--crypto-secondary, #0f172a);
    --modal-header-border: var(--rgba-gray-20);
    --modal-close-bg: var(--rgba-white-80);
    --modal-close-border: var(--rgba-gray-30);
    --modal-close-text: var(--color-slate-500);
    --modal-close-hover-bg: var(--rgba-error-10);
    --modal-close-hover-text: var(--ui-error-primary);
    --modal-close-hover-border: var(--rgba-error-20);
    --modal-title-gradient-start: var(--crypto-secondary, #0f172a);
    --modal-title-gradient-mid: var(--crypto-accent, #334155);
    --modal-title-gradient-end: var(--rgba-gray-60, #475569);
    --modal-title-underline: var(--crypto-primary, #3b82f6);
    --modal-body-bg: var(--gradient-surface);
    --modal-footer-bg: var(--gradient-light);
    --modal-footer-border: var(--rgba-gray-25);
    --modal-footer-line: var(--rgba-primary-30);
    
    /* Form Element Tokens */
    --wallet-container-bg: var(--gradient-light);
    --wallet-container-border: var(--rgba-gray-50);
    --wallet-container-hover-border: var(--rgba-primary-40);
    --wallet-header-bg: var(--gradient-primary-light);
    --wallet-header-border: var(--rgba-gray-30);
    --wallet-header-text: var(--color-neutral-700);
    --wallet-header-icon-bg: var(--rgba-primary-10);
    --wallet-header-icon-border: var(--rgba-primary-20);
    --wallet-input-bg: var(--rgba-white-95);
    --wallet-input-border: var(--rgba-gray-60);
    --wallet-input-text: #1f2937;
    --wallet-input-focus-bg: var(--rgba-primary-05);
    --wallet-input-focus-border: var(--rgba-primary-40);
    --wallet-input-focus-shadow: 0 0 0 3px var(--rgba-primary-10);
    
    /* Timer Section Tokens */
    --timer-bg: var(--gradient-warning-light);
    --timer-border: var(--rgba-warning-191-20);
    --timer-line: var(--rgba-warning-60);
    --timer-line-mid: var(--rgba-warning-80);
    --timer-icon-bg: var(--rgba-warning-20);
    --timer-icon-bg-end: var(--rgba-warning-15);
    --timer-icon-border: var(--rgba-warning-30);
    --timer-icon-shine: var(--rgba-white-10);
    --timer-text: var(--color-warning-800);
    --timer-countdown: #92400e;
    --timer-countdown-shadow: var(--rgba-warning-10);
    --timer-countdown-line: var(--rgba-warning-40);
    
    /* Success Modal Tokens */
    --success-modal-bg: var(--gradient-success);
    --success-modal-shine-start: var(--rgba-white-20);
    --success-modal-shine-end: var(--rgba-white-30);
    --success-details-bg: var(--gradient-success-light);
    --success-details-border: var(--rgba-success-20);
    --success-details-line: var(--rgba-success-50);
    --success-details-text: #065f46;
    --success-details-item-border: var(--rgba-success-10);
    --success-ref-bg: var(--rgba-success-10);
    --success-ref-border: var(--rgba-success-20);
    --success-ref-text: #065f46;
    --success-copy-hover-bg: var(--rgba-success-10);
    --success-copy-hover-text: #059669;
    --success-note-bg: var(--rgba-primary-05);
    --success-note-border: var(--rgba-primary-20);
    --success-note-text: #1e40af;
    --success-note-icon: #3b82f6;
    
    /* Additional color variations for tokenization */
    --primary-500-50: var(--rgba-primary-50);
    --primary-500-40: var(--rgba-primary-40);
    --error-500-15: var(--rgba-error-15);
    --error-500-10: var(--rgba-error-10);
    --purple-500-40: var(--rgba-purple-40);
    --cyan-500-40: var(--rgba-cyan-40);
    
    /* Button Gradient Tokens - Dynamic Theme Colors */
    --btn-download-bg: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    --btn-download-hover: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
    --btn-download-shadow: 0 6px 20px var(--rgba-primary-30), 0 3px 10px var(--rgba-primary-20);
    --btn-share-success-bg: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%);
    --btn-share-success-shadow: 0 6px 20px var(--rgba-success-30), 0 3px 10px var(--rgba-success-20);
    --btn-close-success-bg: linear-gradient(135deg, var(--gray-500) 0%, var(--gray-600) 100%);
    --btn-close-success-shadow: 0 6px 20px var(--rgba-gray-30), 0 3px 10px var(--rgba-gray-20);
    --btn-close-success-hover: linear-gradient(135deg, var(--gray-600) 0%, var(--gray-700) 100%);
    
    /* Animation and Effect Tokens - Core-specific only */
    --qr-border-glow: var(--gradient-rainbow);
    --modal-glow: radial-gradient(circle at 50% 50%, var(--rgba-primary-08) 0%, transparent 70%);
    /* Other gradient effects now imported from shared/tokens.css */
    
    /* Modal Spacing Tokens */
    --modal-padding-sm: 16px;
    --modal-padding-md: 20px;
    --modal-padding-lg: 24px;
    --modal-padding-xl: 32px;
    --modal-gap-sm: 8px;
    --modal-gap-md: 12px;
    --modal-gap-lg: 16px;
    --modal-gap-xl: 20px;
    --modal-border-radius: var(--radius-2xl);
    --modal-header-radius: 20px;
    --modal-footer-radius: 24px;
    --modal-button-radius: 16px;
    --modal-input-radius: 12px;
    --modal-close-radius: var(--ui-radius-sm);
    
    /* Modal Size Tokens */
    --modal-max-width: 520px;
    --modal-width: 92%;
    --modal-max-height: 92vh;
    --modal-close-size: 40px;
    --modal-icon-size: 18px;
    --modal-button-height: 60px;
    --modal-button-min-height: 56px;
    --modal-input-height: auto;
    
    /* Modal Typography Tokens */
    --modal-title-size: clamp(2rem, 5vw, 2.8rem);
    --modal-title-weight: 700;
    --modal-title-spacing: -0.025em;
    --modal-text-size: 1rem;
    --modal-text-weight: 500;
    --modal-button-size: 16px;
    --modal-button-weight: 600;
    --modal-input-size: 14px;
    --modal-input-weight: 500;
    
    /* Modal Z-Index Tokens */
    --modal-z-base: 1;
    --modal-z-content: 2;
    --modal-z-close: 15;
    --modal-z-icon: 2;
    --modal-z-shine: 1;
    --modal-z-overlay: 0;
        --rgba-blue-246-40: var(--rgba-primary-40);
        --rgba-blue-246-00: var(--rgba-primary-00);
        --rgba-blue-246-25: var(--rgba-primary-25);
        
        /* Border utilities */
        --rgba-border-light: var(--rgba-gray-40);
        --rgba-border-medium: var(--rgba-gray-30);
        
        /* Legacy gray aliases for backward compatibility */
        --rgba-gray-175-25: var(--rgba-gray-25);
        --rgba-gray-175-30: var(--rgba-gray-30);
        --rgba-gray-128-80: var(--rgba-gray-80);
    --rgba-blue-246-03: var(--rgba-primary-03); --rgba-purple-246-02: var(--rgba-purple-02);
--rgba-purple-246-30: var(--rgba-purple-30);
--rgba-purple-246-50: var(--rgba-purple-50); --rgba-teal-212-03: var(--rgba-cyan-03);
    --rgba-blue-246-10: var(--rgba-primary-10); --rgba-blue-246-12: var(--rgba-primary-12); --rgba-blue-246-15: var(--rgba-primary-15); --rgba-blue-246-20: var(--rgba-primary-20);
    --rgba-blue-246-25: var(--rgba-primary-25); 
    --rgba-blue-246-30: var(--rgba-primary-30); 
    --rgba-blue-246-35: var(--rgba-primary-35); 
    --rgba-blue-246-50: var(--rgba-primary-50); 
    --rgba-green-129-08: var(--rgba-success-08); --rgba-green-129-10: var(--rgba-success-10); --rgba-green-129-12: var(--rgba-success-12); --rgba-green-129-15: var(--rgba-success-15);
    --rgba-green-129-20: var(--rgba-success-20);
  --rgba-green-129-25: var(--rgba-success-25);
--rgba-green-129-30: var(--rgba-success-30);
--rgba-green-129-40: var(--rgba-success-40);
        /* Legacy green aliases for backward compatibility */
        --rgba-green-105-04: var(--rgba-success-04);
        --rgba-green-105-08: var(--rgba-success-08);
        --rgba-green-105-30: var(--rgba-success-30);
        --rgba-green-105-40: var(--rgba-success-40);
        
        /* Legacy color aliases for backward compatibility */
        --color-green-857: #047857;
        --color-slate-249: #f1f5f9;
        --color-slate-240: #e2e8f0;
        --color-gray-235: #e5e7eb;
        --color-gray-213: #d1d5db;
        --color-gray-175: #9ca3af;
    
    /* Specific Color Values */
    --color-slate-500: #64748b; --color-slate-600: #475569; --color-slate-700: #334155; --color-slate-800: #1e293b;
    --color-amber-600: #d97706; --color-amber-800: #92400e; --color-emerald-800: #065f46; --color-blue-800: #1e40af;
    
    /* Color Aliases for Consistency */
    --color-primary: var(--primary-500);      --color-primary-600: var(--primary-600);
    --color-primary-800: var(--primary-800);  --color-success: var(--success-500);
    --color-success-600: var(--success-600);  --color-success-800: #065f46;
    --color-warning: var(--warning-500);      --color-warning-600: var(--warning-600);
    --color-warning-800: #92400e;            --color-error: var(--error-500);
    --color-neutral-500: var(--gray-500);    --color-neutral-700: var(--gray-700);
    --color-neutral-900: var(--gray-900);    --color-neutral-600: var(--gray-600);
    
    /* Transition System */
    --transition-slow: all 0.4s cubic-bezier(0.165,0.84,0.44,1);
    
    /* Component Aliases */
    --radius-card: var(--radius-2xl);    --radius-button: var(--radius-md);
    --radius-icon: var(--radius-lg);     --radius-input: var(--radius-md);
    --backdrop-blur-light: blur(10px);   --backdrop-blur-medium: blur(20px) saturate(180%);
    --backdrop-blur-glass: blur(16px) saturate(120%);
    
    /* Cryptocurrency Brand Colors */
    --bitcoin-color: #f7931a;    --bitcoin-bg: #fff9f0;
    --ethereum-color: #627eea;   --ethereum-bg: #f0f4ff;
    --tether-color: #26a17b;     --tether-bg: #f0fdf7;
    --litecoin-color: #bfbbbb;   --litecoin-bg: #f9f9f9;
    --binance-color: #f3ba2f;    --binance-bg: #fffbf0;
    
    /* WordPress Integration */
    --wp-override: 1;
}

/* ===============================================
   CORE LAYOUT & RESET SYSTEM
   =============================================== */

/* WordPress Theme Override - Clean Reset */
.crypto-donation-container * {
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: inherit; line-height: inherit;
}

/* Main Container - Modern Glass Design */
.crypto-donation-container {
    max-width: min(95vw, 1200px);
    width: 100%;
    margin: 32px auto;
    background: transparent;
    border-radius: var(--radius-2xl);
    box-shadow: 0 10px 25px -5px var(--rgba-black-10), 0 8px 10px -6px var(--rgba-black-10);
    position: relative;
    overflow: hidden;
    color: var(--text-primary);
    line-height: 1.6;
    animation: slideUpAndScale 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    isolation: isolate;
    contain: layout style paint;
}

.crypto-donation-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--primary-400) 25%, var(--primary-500) 50%, var(--primary-400) 75%, transparent 100%);
    opacity: 0.6;
}

/* Font Awesome Icons - Enhanced Loading with Fallbacks */
.crypto-donation-container i,
.crypto-donation-container .fa,
.crypto-donation-container .fas,
.crypto-donation-container .fab,
.crypto-donation-container .far,
.crypto-donation-container .fal {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    font-style: normal;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-variant: normal;
    text-transform: none;
    speak: none;
}

/* Brand icons specific weight */
.crypto-donation-container .fab {
    font-weight: 400;
}

/* Fallback for missing FontAwesome - show text instead of rectangles */
.crypto-donation-container i:not([class*="fa-"]):before,
.crypto-donation-container i[class=""]:before {
    content: "⚠";
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: normal;
}

/* ===============================================
   CAROUSEL SYSTEM - MODERN & RESPONSIVE
   =============================================== */

/* Carousel Container - Enhanced Smooth Transitions */
.carousel-container {
    position: relative;
    overflow: hidden;
    display: block;
    background: transparent;
    border-radius: var(--radius-2xl);
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    min-height: 500px;
    height: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                backdrop-filter 0.4s ease;
}

/* Enhanced visual feedback during navigation transitions */
.carousel-container.transitioning {
    transform: none;
    box-shadow: none;
    border-color: transparent;
    backdrop-filter: none;
}

/* Simplified Height Rules */
[data-crypto-widget] {
    min-height: auto;
    height: auto;
}

/* Carousel Wrapper - No Flexbox */
.carousel-wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: auto;
    height: auto;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    scroll-behavior: smooth;
}

/* Carousel Slides - Enhanced Smooth Transitions */
.carousel-slide {
    width: 100%;
    padding: 20px 30px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    background: var(--gradient-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--rgba-white-50);
    box-shadow: var(--shadow-card);
    min-height: 400px;
    height: auto;
    max-height: none;
    box-sizing: border-box;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                visibility 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
    transform: translateY(30px) scale(0.96);
    filter: blur(2px);
    pointer-events: none;
    z-index: 1;
}

/* Show only active slides with enhanced entrance */
.carousel-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 100;
    transform: translateY(0) scale(1);
    filter: blur(0);
    box-shadow: var(--shadow-card), 0 8px 32px var(--rgba-primary-08);
    border-color: var(--rgba-primary-20);
    pointer-events: auto;
}

/* Hide inactive slides with smooth transition */
.carousel-slide:not(.active) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(30px) scale(0.96);
    filter: blur(2px);
    z-index: 1;
}

/* Hide disabled slides completely (for amount selection when disabled) */
.carousel-slide.disabled-slide {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ===============================================
   HEADER & CONTENT SECTIONS
   =============================================== */



/* Slide Headers & Icons */
.slide-header {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

.step-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    background: var(--gradient-primary);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-button-primary);
    animation: pulseGlow 3s infinite;
    border: 4px solid var(--rgba-white-90);
}

.step-icon i {
    font-size: 2rem;
    color: white;
    z-index: 2;
    position: relative;
    text-shadow: 0 2px 8px var(--rgba-black-25);
}

.slide-header h3 {
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -0.03em;
    line-height: 1.2;
    text-align: center;
    background: linear-gradient(135deg, var(--color-neutral-900) 0%, var(--color-primary-600) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.slide-header p {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.6;
    opacity: 0.9;
    text-align: center;
    max-width: min(90%, 500px);
    margin: 0 auto;
}

.slide-content {
    position: relative;
    padding: 20px 0;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: fit-content;
}

/* ===============================================
   AMOUNT SELECTION SYSTEM
   =============================================== */

.amount-section,
.crypto-section {
    padding: 30px 25px;
    text-align: center;
    position: relative;
    background: var(--bg-white);
    border-top: 1px solid var(--border-light);
    transition: var(--transition-normal);
}

.amount-section h3,
.crypto-section h3 {
    margin-bottom: 18px;
    color: var(--color-neutral-900);
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    position: relative;
}

.amount-section h3::after,
.crypto-section h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
}

.amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 600px;
    margin: 24px auto 0;
    padding: 20px;
    width: 100%;
}

/* Mobile responsive for amount grid */
@media (max-width: 768px) {
    .amount-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 8px;
        margin: 16px auto 0;
        box-sizing: border-box;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .amount-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; 
        padding: 8px; /* Consistent reduced padding */
    }
}

/* Amount button styles consolidated in amount-selection.css */

/* ===============================================
   CUSTOM AMOUNT INPUT - RESPONSIVE SMART DESIGN
   =============================================== */

/* Custom Amount Input Container - Smart Responsive */
.crypto-donation-container .custom-amount-input,
[id*="crypto-donation"] .custom-amount-input,
div.crypto-donation-container .custom-amount-input {
    display: none;
    width: 100%;
    max-width: 100%;
    margin: 24px auto;
    padding: 0 20px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(-10px);
}

/* Show state */
.crypto-donation-container .custom-amount-input[style*="block"],
[id*="crypto-donation"] .custom-amount-input[style*="block"],
div.crypto-donation-container .custom-amount-input[style*="block"] {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: fadeInUp 0.4s ease;
}

/* Input Group - Smart Width Container */
.crypto-donation-container .input-group, [id*="crypto-donation"] .input-group, div.crypto-donation-container .input-group { position: relative; width: 100%; max-width: 450px; min-width: 280px; margin: 0 auto; background: var(--surface-primary); border: 2px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition-smooth); }

/* Hover and Focus States */
.crypto-donation-container .input-group:hover, [id*="crypto-donation"] .input-group:hover, div.crypto-donation-container .input-group:hover { border-color: var(--border-focus); box-shadow: var(--shadow-primary); transform: translateY(-2px); }

.crypto-donation-container .input-group:focus-within, [id*="crypto-donation"] .input-group:focus-within, div.crypto-donation-container .input-group:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--primary-100), var(--shadow-primary); transform: translateY(-2px); }

/* Fix sticky hover states on touch devices */
@media (hover: none) and (pointer: coarse) {
  .crypto-donation-container .input-group:hover,
  [id*="crypto-donation"] .input-group:hover,
  div.crypto-donation-container .input-group:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
  }
  
  .crypto-donation-container .inline-progress-bar:hover,
  [id*="crypto-donation"] .inline-progress-bar:hover,
  div.crypto-donation-container .inline-progress-bar:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
  }
  
  /* Add touch-friendly active states */
  .crypto-donation-container .input-group:active,
  [id*="crypto-donation"] .input-group:active,
  div.crypto-donation-container .input-group:active {
    transform: scale(0.99) !important;
    transition: transform 0.1s ease !important;
  }
}

/* Dollar Sign Prefix */
.crypto-donation-container .input-prefix, [id*="crypto-donation"] .input-prefix, div.crypto-donation-container .input-prefix { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 700; color: var(--primary-500); z-index: 10; pointer-events: none; transition: var(--transition-smooth); }

/* Input Field - Responsive and Smart */
html body div.crypto-donation-container .input-group input:not([type="button"]):not([type="submit"]), html body [id*="crypto-donation"] .input-group input:not([type="button"]):not([type="submit"]), html body div[class*="crypto-donation"] .input-group input:not([type="button"]):not([type="submit"]) { width: 100%; height: 70px; padding: 0 20px 0 50px; border: none; background: transparent; font-size: 24px; font-weight: 700; color: var(--text-primary); text-align: center; outline: none; box-sizing: border-box; font-family: inherit; transition: var(--transition-smooth); }

/* Focus state for input */
html body div.crypto-donation-container .input-group input:not([type="button"]):not([type="submit"]):focus, html body [id*="crypto-donation"] .input-group input:not([type="button"]):not([type="submit"]):focus, html body div[class*="crypto-donation"] .input-group input:not([type="button"]):not([type="submit"]):focus { font-size: 26px; }

/* Focus state for prefix */
.crypto-donation-container .input-group:focus-within .input-prefix, [id*="crypto-donation"] .input-group:focus-within .input-prefix, div.crypto-donation-container .input-group:focus-within .input-prefix { color: var(--primary-600); transform: translateY(-50%) scale(1.1); }

/* Placeholder Styling */
html body div.crypto-donation-container .input-group input:not([type="button"]):not([type="submit"])::placeholder, html body [id*="crypto-donation"] .input-group input:not([type="button"]):not([type="submit"])::placeholder, html body div[class*="crypto-donation"] .input-group input:not([type="button"]):not([type="submit"])::placeholder { color: var(--text-tertiary); font-weight: 500; font-size: 18px; text-align: center; }

/* Success State */
.crypto-donation-container .input-group.success, [id*="crypto-donation"] .input-group.success, div.crypto-donation-container .input-group.success { border-color: var(--border-success); background: var(--success-50); box-shadow: 0 0 0 3px var(--success-100), var(--shadow-success); }

.crypto-donation-container .input-group.success .input-prefix, [id*="crypto-donation"] .input-group.success .input-prefix, div.crypto-donation-container .input-group.success .input-prefix { color: var(--success-600); }

/* Error State */
.crypto-donation-container .input-group.error, [id*="crypto-donation"] .input-group.error, div.crypto-donation-container .input-group.error { border-color: var(--border-error); background: var(--error-50); animation: shake 0.3s ease; box-shadow: 0 0 0 3px var(--error-100), var(--shadow-error); }

.crypto-donation-container .input-group.error .input-prefix, [id*="crypto-donation"] .input-group.error .input-prefix, div.crypto-donation-container .input-group.error .input-prefix { color: var(--error-600); }

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ===============================================
   ENHANCED INLINE PROGRESS BAR (In Slide Actions)
   =============================================== */

/* Inline Progress Bar Container - Enhanced for Desktop */
.crypto-donation-container .inline-progress-bar,
[id*="crypto-donation"] .inline-progress-bar,
div.crypto-donation-container .inline-progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--rgba-white-85);
    border: 1px solid var(--rgba-primary-12);
    border-radius: 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 
        0 2px 8px var(--rgba-black-04),
        0 1px 3px var(--rgba-black-06),
        inset 0 1px 0 var(--rgba-white-70);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    min-width: 160px;
    max-width: 220px;
    flex-shrink: 0; /* Prevent compression of container */
}

/* Enhanced subtle gradient overlay */
.crypto-donation-container .inline-progress-bar::before,
[id*="crypto-donation"] .inline-progress-bar::before,
div.crypto-donation-container .inline-progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        var(--rgba-primary-03) 0%, 
        var(--rgba-purple-246-02) 50%, 
        var(--rgba-teal-212-03) 100%);
    z-index: 1;
    opacity: 0.6;
}

/* Enhanced Mini Progress Steps - Perfect Circle Design */
.crypto-donation-container .progress-step-mini,
[id*="crypto-donation"] .progress-step-mini,
div.crypto-donation-container .progress-step-mini {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rgba-white-95);
    border: 2px solid var(--rgba-gray-175-30);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 2;
    box-shadow: 
        0 2px 6px var(--rgba-black-06),
        0 1px 3px var(--rgba-black-04);
    flex-shrink: 0; /* Prevent compression */
    aspect-ratio: 1 / 1; /* Ensure perfect square ratio */
}

.crypto-donation-container .progress-step-mini i,
[id*="crypto-donation"] .progress-step-mini i,
div.crypto-donation-container .progress-step-mini i {
    font-size: 14px;
    color: var(--rgba-gray-128-80);
    transition: all 0.3s ease;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Remove old step-number styles */
.crypto-donation-container .progress-step-mini .step-number,
[id*="crypto-donation"] .progress-step-mini .step-number,
div.crypto-donation-container .progress-step-mini .step-number {
    display: none;
}

/* Enhanced Active State - Perfect Circle */
.crypto-donation-container .progress-step-mini.active,
[id*="crypto-donation"] .progress-step-mini.active,
div.crypto-donation-container .progress-step-mini.active {
    background: var(--gradient-primary);
    border-color: var(--primary-500);
    box-shadow: 
        0 0 0 3px var(--rgba-primary-15),
    0 4px 12px var(--rgba-primary-25),
    0 2px 6px var(--rgba-primary-20);
    transform: scale(1.08);
    width: 36px; /* Maintain exact dimensions */
    height: 36px;
    aspect-ratio: 1 / 1;
}

.crypto-donation-container .progress-step-mini.active i,
[id*="crypto-donation"] .progress-step-mini.active i,
div.crypto-donation-container .progress-step-mini.active i {
    color: white;
    font-size: 15px;
    font-weight: 600;
}

/* Enhanced Completed State - Perfect Circle */
.crypto-donation-container .progress-step-mini.completed,
[id*="crypto-donation"] .progress-step-mini.completed,
div.crypto-donation-container .progress-step-mini.completed {
    background: var(--gradient-success);
    border-color: var(--success-500);
    box-shadow: 
        0 0 0 3px var(--rgba-green-129-12),
        0 3px 8px var(--rgba-green-129-20),
        0 1px 4px var(--rgba-green-129-15);
    transform: scale(1.05);
    width: 36px; /* Maintain exact dimensions */
    height: 36px;
    aspect-ratio: 1 / 1;
}

.crypto-donation-container .progress-step-mini.completed i,
[id*="crypto-donation"] .progress-step-mini.completed i,
div.crypto-donation-container .progress-step-mini.completed i {
    color: white;
    font-size: 15px;
    font-weight: 700;
}

/* Remove old step-number styles from states */
.crypto-donation-container .progress-step-mini.active .step-number, [id*="crypto-donation"] .progress-step-mini.active .step-number, div.crypto-donation-container .progress-step-mini.active .step-number, .crypto-donation-container .progress-step-mini.completed .step-number, [id*="crypto-donation"] .progress-step-mini.completed .step-number, div.crypto-donation-container .progress-step-mini.completed .step-number { display: none; }

/* Enhanced Progress Lines - Better proportions for icons */
.crypto-donation-container .progress-line, [id*="crypto-donation"] .progress-line, div.crypto-donation-container .progress-line { width: 32px; height: 2px; background: var(--rgba-gray-175-25); border-radius: 2px; position: relative; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 2; margin: 0 4px; }

.crypto-donation-container .progress-line.completed, [id*="crypto-donation"] .progress-line.completed, div.crypto-donation-container .progress-line.completed { background: var(--gradient-success); box-shadow: var(--shadow-success); height: 3px; }

/* Enhanced Hover Effect - More subtle and modern */
@media (min-width: 769px) {
    .crypto-donation-container .inline-progress-bar:hover, [id*="crypto-donation"] .inline-progress-bar:hover, div.crypto-donation-container .inline-progress-bar:hover { background: var(--rgba-white-95); border-color: var(--rgba-primary-20); box-shadow: var(--shadow-lg), var(--shadow-md), inset 0 1px 0 var(--rgba-white-80); transform: translateY(-1px) scale(1.02); }
    
    .crypto-donation-container .inline-progress-bar:hover::before, [id*="crypto-donation"] .inline-progress-bar:hover::before, div.crypto-donation-container .inline-progress-bar:hover::before { opacity: 0.8; }
}

/* Responsive Design - Better Proportions */
@media (max-width: 768px) {
    /* Reduce section padding on mobile to prevent overflow */
    .amount-section, .crypto-section { 
        padding: 20px 12px; 
    }
    
    /* Reduce slide-content padding for mobile */
    .slide-content { 
        padding: 12px 0;
    }
    
    .crypto-donation-container .custom-amount-input, [id*="crypto-donation"] .custom-amount-input, div.crypto-donation-container .custom-amount-input { padding: 0; }
    
    .crypto-donation-container .input-group, [id*="crypto-donation"] .input-group, div.crypto-donation-container .input-group { max-width: 380px; min-width: 260px; }
    
    html body div.crypto-donation-container .input-group input:not([type="button"]):not([type="submit"]), html body [id*="crypto-donation"] .input-group input:not([type="button"]):not([type="submit"]), html body div[class*="crypto-donation"] .input-group input:not([type="button"]):not([type="submit"]) { height: 65px; font-size: 22px; padding: 0 16px 0 45px; }
    
    html body div.crypto-donation-container .input-group input:not([type="button"]):not([type="submit"]):focus, html body [id*="crypto-donation"] .input-group input:not([type="button"]):not([type="submit"]):focus, html body div[class*="crypto-donation"] .input-group input:not([type="button"]):not([type="submit"]):focus { font-size: 24px; }
    
    .crypto-donation-container .input-prefix, [id*="crypto-donation"] .input-prefix, div.crypto-donation-container .input-prefix { left: 16px; font-size: 18px; }
    
    /* Mobile Inline Progress Bar */
    .crypto-donation-container .inline-progress-bar, [id*="crypto-donation"] .inline-progress-bar, div.crypto-donation-container .inline-progress-bar { display: none; /* Hide on mobile for now */ }
}

@media (max-width: 480px) {
    /* Ultra-simplified animations for small mobile devices */
    .crypto-donation-container {
        animation: slideUpAndScaleMobile 0.2s ease-out !important;
    }
    
    .carousel-slide.active {
        animation: slideInScaleCenterMobile 0.2s ease-out !important;
    }
    
    /* Disable complex effects on very small screens */
    .carousel-slide {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    .crypto-donation-container .custom-amount-input, [id*="crypto-donation"] .custom-amount-input, div.crypto-donation-container .custom-amount-input { padding: 0 12px; }
    
    .crypto-donation-container .input-group, [id*="crypto-donation"] .input-group, div.crypto-donation-container .input-group { max-width: 320px; min-width: 240px; }
    
    html body div.crypto-donation-container .input-group input:not([type="button"]):not([type="submit"]), html body [id*="crypto-donation"] .input-group input:not([type="button"]):not([type="submit"]), html body div[class*="crypto-donation"] .input-group input:not([type="button"]):not([type="submit"]) { height: 60px; font-size: 20px; padding: 0 12px 0 40px; }
    
    html body div.crypto-donation-container .input-group input:not([type="button"]):not([type="submit"]):focus, html body [id*="crypto-donation"] .input-group input:not([type="button"]):not([type="submit"]):focus, html body div[class*="crypto-donation"] .input-group input:not([type="button"]):not([type="submit"]):focus { font-size: 22px; }
    
    html body div.crypto-donation-container .input-prefix, html body [id*="crypto-donation"] .input-prefix, html body div[class*="crypto-donation"] .input-prefix { left: 12px; font-size: 16px; }
    
    html body div.crypto-donation-container .input-group input:not([type="button"]):not([type="submit"])::placeholder, html body [id*="crypto-donation"] .input-group input:not([type="button"]):not([type="submit"])::placeholder, html body div[class*="crypto-donation"] .input-group input:not([type="button"]):not([type="submit"])::placeholder { font-size: 16px; }
    
    /* Mobile Inline Progress Bar */
    .crypto-donation-container .inline-progress-bar, [id*="crypto-donation"] .inline-progress-bar, div.crypto-donation-container .inline-progress-bar { display: none; /* Hide on mobile for now */ }
}

/* Smart width for very small amounts */
@media (max-width: 360px) {
    .crypto-donation-container .input-group, [id*="crypto-donation"] .input-group, div.crypto-donation-container .input-group { max-width: 280px; min-width: 200px; }
}

/* Selected Amount Display */
.selected-amount-display { 
    margin: 24px auto 0; 
    text-align: center;
    background: var(--surface-modal);
    border: 2px solid var(--success-200);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    max-width: fit-content;
    min-width: 200px;
    box-shadow: 0 4px 16px var(--rgba-black-08);
    transition: all 0.3s ease;
    display: inline-block;
}

.selected-amount-display:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--success-100);
    border-color: var(--success-300);
}

.amount-summary { padding: 16px 24px; background: var(--gradient-primary-light); border-radius: var(--radius-lg); border: 2px solid var(--rgba-primary-20); display: inline-block; }

/* ===============================================
   ANIMATIONS & KEYFRAMES
   =============================================== */

@keyframes slideUpAndScale { 0% { transform: translateY(40px) scale(0.95); opacity: 0; filter: blur(8px); } 60% { transform: translateY(-5px) scale(1.01); opacity: 0.8; filter: blur(2px); } 100% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); } }

/* Mobile-optimized animations */
@keyframes slideUpAndScaleMobile {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideInScaleCenterMobile {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes slideInFromTop { 0% { opacity: 0; transform: translateY(-20px) scaleY(0.8); } 100% { opacity: 1; transform: translateY(0) scaleY(1); } }

@keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

@keyframes pulseGlow { 0%, 100% { transform: scale(1); box-shadow: var(--shadow-primary), var(--shadow-md); } 50% { transform: scale(1.08); box-shadow: var(--shadow-primary), var(--shadow-lg); } }

@keyframes rotateSmooth { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* loadingDotsPulse moved to crypto-buttons.css to avoid duplication */

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

.section { margin-bottom: 36px; }

.section:last-child { margin-bottom: 0; }

.loading-dots { animation: loadingDotsPulse 1.5s ease-in-out infinite; color: var(--gray-500); }

#priceUpdateIcon.rotating { animation: rotateSmooth 1s linear infinite; }

/* ===============================================
   RESPONSIVE BREAKPOINTS
   =============================================== */

/* Extra Large Desktop - Ensure horizontal layout */
@media screen and (min-width: 1400px) {
    .carousel-container { max-width: 100%; width: 100%; margin: 0; padding: 0; }
    
    /* Amount grid styles consolidated in amount-selection.css */
    
    /* .crypto-grid responsive styles moved to crypto-buttons.css for better organization */
}

/* Large Desktop */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
    .crypto-donation-container { max-width: min(95vw, 1200px); margin: 40px auto; padding: 0 40px; }
    
    .carousel-container { max-width: 100%; width: 100%; margin: 0; padding: 0; }
    
    /* Amount grid styles consolidated in amount-selection.css */
    
    .crypto-grid { grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-xl), 1fr)); gap: var(--space-xl); padding: var(--space-3xl); max-width: var(--grid-container-lg); }
}

/* Desktop */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .crypto-donation-container { max-width: min(90vw, 1000px); padding: 0 32px; }
    
    .carousel-container { max-width: 100%; width: 100%; margin: 0; padding: 0; }
    
    /* Amount grid styles consolidated in amount-selection.css */
    
    .crypto-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; padding: 28px; max-width: var(--grid-container-md); }
}

/* Tablet */
@media screen and (min-width: 769px) and (max-width: 991px) {
    .crypto-donation-container { max-width: min(85vw, 800px); padding: 0 24px; }
    
    .carousel-container { max-width: 100%; width: 100%; margin: 0; padding: 0; }
    
    /* Amount grid styles consolidated in amount-selection.css */
    
    .crypto-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); padding: var(--space-2xl); max-width: var(--grid-container-sm); }
}

/* Mobile Layout Adjustments */
@media screen and (max-width: 768px) {
    /* Simplified animations for mobile performance */
    .crypto-donation-container {
        animation: slideUpAndScaleMobile 0.4s ease-out !important;
    }
    
    .carousel-slide.active {
        animation: slideInScaleCenterMobile 0.3s ease-out !important;
    }
    
    .crypto-donation-container { margin: 8px auto; max-width: calc(100vw - 16px); border-radius: var(--radius-lg); padding: 0; }
    
    .carousel-container { max-width: 100%; width: 100%; margin: 0; padding: 0; border-radius: var(--radius-lg); }
    
    .carousel-slide { padding: 20px 16px 24px; border-radius: var(--radius-lg); }
    

    
    /* Amount grid styles consolidated in amount-selection.css */
    
    /* Amount button styles moved to amount-selection.css for better organization */
    
    /* Crypto responsive styles moved to crypto-buttons.css for better organization */
}

/* ===============================================
   AMOUNT SELECTION DISABLED MODE
   =============================================== */

/* Base styling for amount displays when disabled */
[data-amount-selection="disabled"] .amount-value-display,
[data-amount-selection="disabled"] .crypto-amount-display {
    display: inline;
    font-style: normal;
    opacity: 1;
    color: var(--success-600);
    font-size: 0; /* Hide original text */
    font-weight: 600;
    text-indent: -9999px; /* Hide original text */
    visibility: visible;
}

/* Shared badge styling for both amount displays */
[data-amount-selection="disabled"] .amount-value-display::before,
[data-amount-selection="disabled"] .crypto-amount-display::before {
    font-size: 0.85rem;
    background: var(--rgba-success-10);
    padding: 3px 10px;
    border-radius: 16px;
    border: 1px solid var(--rgba-success-20);
    text-indent: 0;
    display: inline-block;
    white-space: nowrap;
    line-height: 1.2;
    color: var(--success-600);
    font-weight: 500;
}

/* Content for specific badges */
[data-amount-selection="disabled"] .amount-value-display::before {
    content: 'Flexible';
}

[data-amount-selection="disabled"] .crypto-amount-display::before {
    content: 'Any amount';
}

/* Modal context styling overrides */
[data-amount-selection="disabled"] .modal-content .amount-value-display::before,
[data-amount-selection="disabled"] .modal-content .crypto-amount-display::before {
    background: var(--rgba-primary-10);
    color: var(--primary-500);
    border-color: var(--rgba-primary-20);
}

/* Modal donation summary - hide flexible amount, keep only desired amount */
[data-amount-selection="disabled"] .modal-content #modalAmountSummary {
    display: none;
}

[data-amount-selection="disabled"] .modal-content #modalCryptoAmount {
    background: linear-gradient(135deg, var(--rgba-primary-10) 0%, var(--rgba-purple-05) 100%);
    color: var(--primary-600);
    border: 1px solid var(--rgba-primary-20);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-block;
}

[data-amount-selection="disabled"] .modal-content .donation-summary-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
}

/* Progress bar adjustments */
[data-amount-selection="disabled"] .inline-progress-bar .progress-step-mini:first-child,
[data-amount-selection="disabled"] .inline-progress-bar .progress-line:last-child {
    display: none;
}

[data-amount-selection="disabled"] .inline-progress-bar {
    min-width: 120px;
    max-width: 160px;
    padding: 10px 12px;
    justify-content: center;
    gap: 8px;
}

/* Hide elements not needed when amount selection is disabled */
[data-amount-selection="disabled"] .amount-reminder {
    display: none;
}

/* ========== frontend\ui-components.css ========== */
/* ===============================================
   UI COMPONENTS & FORMS
   Uses unified tokens from shared/tokens.css
   =============================================== */

/* tokens.css imported globally via main.css */

/* ===============================================
 Crypdu Donate PLUGIN - UI COMPONENTS
 Clean,organized,and optimized styles
 
 Animations, price update buttons, and CSS custom 
 properties are defined in crypto-donation.css to avoid duplication
 =============================================== */


/* ===============================================
 UI COMPONENTS - UNIFIED COLOR SYSTEM
 Uses tokens from core.css for consistency
 =============================================== */
:root{
 /* UI Component Colors - Using Unified Tokens */
 --ui-success-primary: var(--success-500);
 --ui-error-primary: var(--error-500);
 --ui-warning-primary: var(--warning-500);
 
 /* Modal & Overlay - Using Unified Tokens */
 --ui-overlay-bg: var(--gradient-ui-overlay);
--ui-modal-bg: var(--gradient-ui-modal);
 --ui-modal-border: 1px solid var(--border-overlay);
 --ui-modal-shadow: 0 32px 64px var(--rgba-black-12), 0 16px 32px var(--rgba-black-08), 0 0 0 1px var(--rgba-white-05), inset 0 1px 0 var(--rgba-white-10);
 
 /* Button Gradients - Using Unified Tokens */
 --ui-btn-success-bg: var(--gradient-success);
 --ui-btn-success-hover: var(--gradient-success-dark);
 
 /* Form Elements - Using Unified Tokens */
 --ui-input-border: 2px solid var(--form-border);
 --ui-input-focus-border: var(--form-border-focus);
 --ui-input-bg: var(--form-bg);
 --ui-input-shadow: 0 2px 8px var(--rgba-black-04), inset 0 1px 0 var(--rgba-white-10);
 
 /* Legacy Aliases - Use Unified Tokens */
 --ui-gap-sm: var(--space-sm);
 --ui-gap-md: var(--space-lg);
 --ui-gap-lg: var(--space-2xl);
 --ui-gap-xl: var(--space-3xl);
 --ui-radius-sm: var(--radius-sm);
 --ui-radius-md: var(--radius-md);
 --ui-radius-lg: var(--radius-lg);
 --ui-radius-xl: var(--radius-xl);
 --ui-radius-2xl: var(--radius-2xl);
 
 /* Additional Design Tokens - Using Unified System */
 --blur-sm: blur(8px);
 --blur-md: blur(12px);
 --blur-lg: blur(20px);
 --blur-xl: blur(24px);
 --color-slate-500: var(--crypto-gray-500, #64748b);
}


/* ===============================================
 UNIVERSAL RESET & BASE STYLES
 =============================================== */
.modal-overlay *,
.manual-report-modal *,
.manual-report-form-group *{
 box-sizing:border-box;
}

.modal-overlay,
.modal-overlay .modal-content,
.crypto-donation-modal .modal-content,
.modal-content{
 overscroll-behavior:contain;
 -webkit-overflow-scrolling:touch;
}


/* ===============================================
 ACTION BUTTONS - Modern Desktop Design
 =============================================== */
.slide-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    gap: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--rgba-gray-40);
    flex-shrink: 0;
}

/* All slide-action button styles moved to action-buttons.css for better organization */


/* ===============================================
 AMOUNT SUMMARY DISPLAY - Simple & Clean
 =============================================== */
body .crypto-donation-container .amount-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

body .crypto-donation-container .amount-summary::before {
    content: 'Selected Amount';
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

body .crypto-donation-container .usd-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--action-primary);
    margin: 0;
    line-height: 1;
}

body .crypto-donation-container .crypto-equivalent {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 8px;
    padding: 8px 16px;
    background: var(--surface-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

/* Custom amount button styles moved to amount-selection.css for better organization */


/* ===============================================
 MODAL SYSTEM
 =============================================== */
/* Most modal styles have been consolidated in modals.css to avoid duplication */

.modal-overlay .modal-header-content,
.crypto-donation-modal .modal-header-content,
.modal-header-content {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: var(--ui-gap-md);
}

/* ===============================================
 FORM INPUTS
 =============================================== */

html body .form-input:not([type="button"]):not([type="submit"]):focus {
  outline: 2px solid transparent;
}

html body .form-input:not([type="button"]):not([type="submit"]):focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-color: var(--border-focus);
  background: var(--gradient-surface);
  box-shadow: 0 8px 24px var(--primary-100), 0 0 0 4px var(--primary-50), inset 0 1px 0 var(--surface-highlight);
  transform: translateY(-2px);
}

.form-textarea{min-height:120px;resize: vertical;font-family: inherit;line-height: 1.5;}

.form-file-upload{position:relative;overflow: hidden;}

.form-file-input{position:absolute;left: -9999px;opacity: 0;pointer-events: none;}

.form-file-label{display:block;padding: var(--ui-gap-md);border: 2px dashed var(--border-light);border-radius: var(--ui-radius-sm);text-align: center;cursor: pointer;background: var(--ui-input-bg);color: var(--color-slate-500);transition: var(--transition-smooth);position: relative;}

.form-file-label:hover{border-color: var(--border-focus);background: var(--gradient-primary-light);color: var(--primary-500);}

/* Manual Report Form Group Styles - Enhanced with Layer-Based Specificity */
@layer components {
  html body .modal-overlay .crypto-donation-modal .crypto-donation-container .manual-report-form-group input[type="text"]:not([type="button"]):not([type="submit"]),
html body .modal-overlay .crypto-donation-modal .crypto-donation-container .manual-report-form-group input[type="number"]:not([type="button"]):not([type="submit"]),
html body .modal-overlay .crypto-donation-modal .crypto-donation-container .manual-report-form-group input[type="email"]:not([type="button"]):not([type="submit"]),
  .modal-overlay .crypto-donation-modal .crypto-donation-container .manual-report-form-group textarea {
      width: 100%;
      padding: 14px 16px;
      border: 2px solid var(--gray-300);
      border-radius: var(--ui-radius-md);
      background: var(--surface-primary);
      color: var(--text-primary);
      font-size: 15px;
      line-height: 1.5;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 1px 3px var(--rgba-gray-10), inset 0 1px 2px var(--rgba-gray-05);
      font-family: inherit;
      resize: vertical;
  }
}

/* Legacy selectors removed - now handled by @layer components with maximum specificity */

@layer components {
  .modal-overlay .crypto-donation-modal .crypto-donation-container .manual-report-form-group select {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
      background-position: right 12px center;
      background-repeat: no-repeat;
      background-size: 16px;
      padding-right: 44px;
      padding-left: 16px;
      cursor: pointer;
      height: 48px;
      color: var(--gray-700);
      display: block;
      flex: none;
      align-items: unset;
      justify-content: unset;
      text-align: left;
  }
}

.manual-report-form-group select option{padding:12px 16px;background: white;color: var(--gray-700);font-size: 1rem;line-height: 1.5;display: block;white-space: normal;text-overflow: unset;overflow: visible;}

.manual-report-form-group select option:checked{background: var(--primary-500);color: white;}

@layer components {
  html body .modal-overlay .crypto-donation-modal .crypto-donation-container .manual-report-form-group input[type="text"]:not([type="button"]):not([type="submit"]):focus,
html body .modal-overlay .crypto-donation-modal .crypto-donation-container .manual-report-form-group input[type="number"]:not([type="button"]):not([type="submit"]):focus,
html body .modal-overlay .crypto-donation-modal .crypto-donation-container .manual-report-form-group input[type="email"]:not([type="button"]):not([type="submit"]):focus,
  .modal-overlay .crypto-donation-modal .crypto-donation-container .manual-report-form-group textarea:focus,
  .modal-overlay .crypto-donation-modal .crypto-donation-container .manual-report-form-group select:focus {
      outline: 2px solid transparent;
  }
}

@layer components {
  html body .modal-overlay .crypto-donation-modal .crypto-donation-container .manual-report-form-group input[type="text"]:not([type="button"]):not([type="submit"]):focus-visible,
html body .modal-overlay .crypto-donation-modal .crypto-donation-container .manual-report-form-group input[type="number"]:not([type="button"]):not([type="submit"]):focus-visible,
html body .modal-overlay .crypto-donation-modal .crypto-donation-container .manual-report-form-group input[type="email"]:not([type="button"]):not([type="submit"]):focus-visible,
  .modal-overlay .crypto-donation-modal .crypto-donation-container .manual-report-form-group textarea:focus-visible,
  .modal-overlay .crypto-donation-modal .crypto-donation-container .manual-report-form-group select:focus-visible {
      outline: none;
      border-color: var(--primary-500);
      box-shadow: 0 0 0 3px var(--rgba-primary-15), 0 2px 8px var(--rgba-primary-10), inset 0 1px 2px var(--rgba-gray-05);
      background: var(--surface-modal);
  }
}

.manual-report-form-group textarea{min-height:120px;resize: vertical;font-family: inherit;}

.modal-overlay .manual-report-submit,
.crypto-donation-modal .manual-report-submit,
.manual-report-submit{background:var(--gradient-secondary);color: white;border: none;padding: var(--ui-gap-md) var(--ui-gap-xl);border-radius: var(--ui-radius-md);font-size: 1.05rem;font-weight: 600;cursor: pointer;width: 100%;transition: var(--transition-smooth);box-shadow: 0 8px 20px var(--rgba-primary-30),0 4px 12px var(--rgba-primary-20);margin-top: var(--ui-gap-sm);}

.modal-overlay .manual-report-submit:hover,
.crypto-donation-modal .manual-report-submit:hover,
.manual-report-submit:hover{background: var(--gradient-secondary-dark);transform: translateY(-2px);box-shadow: 0 12px 28px var(--rgba-primary-40),0 6px 16px var(--rgba-primary-30);}

/* Manual Report Donation Summary */
.donation-summary-display{background:var(--gradient-donation-summary);border: 2px solid var(--rgba-green-129-15);border-radius: var(--ui-radius-md);padding: 20px;margin-bottom: var(--ui-gap-sm);}

.donation-summary-display .summary-row{display:flex;justify-content: space-between;align-items: center;padding: var(--ui-gap-sm) 0;border-bottom: 1px solid var(--rgba-green-129-10);}

.donation-summary-display .summary-row:last-child{border-bottom: none;}

.donation-summary-display .summary-label{font-weight:600;color: var(--gray-700);font-size: 14px;}

.donation-summary-display .summary-value{font-weight:700;color: var(--color-green-857);font-size: 14px;font-family: 'Monaco','Consolas',monospace;}


/* ===============================================
 SUCCESS MODAL
 =============================================== */
.modal-overlay .success-modal .currency-icon-large,
.crypto-donation-modal .success-modal .currency-icon-large,
.success-modal .currency-icon-large{background:var(--gradient-currency-icon-large);border: 2px solid var(--rgba-success-20);box-shadow: 0 8px 32px var(--rgba-success-15),0 4px 16px var(--rgba-success-10),inset 0 1px 0 var(--rgba-white-10);}

.modal-overlay .success-modal .currency-icon-large i,
.crypto-donation-modal .success-modal .currency-icon-large i,
.success-modal .currency-icon-large i{color:var(--ui-success-primary);text-shadow: 0 2px 8px var(--rgba-success-30);}

.modal-overlay .success-modal .modal-title,
.crypto-donation-modal .success-modal .modal-title,
.success-modal .modal-title{font-size:1.875rem;font-weight: 800;margin-bottom: var(--ui-gap-md);color: var(--text-primary);letter-spacing: -0.025em;line-height: 1.1;}

.modal-overlay .success-message,
.crypto-donation-modal .success-message,
.success-message{color:var(--gray-700);font-size: 1.125rem;font-weight: 500;line-height: 1.6;text-align: center;margin-bottom: var(--ui-gap-xl);background: var(--gradient-success-message);padding: 20px 24px;border-radius: var(--ui-radius-md);border: 1px solid var(--rgba-success-10);backdrop-filter: var(--blur-sm);}

.modal-overlay .success-modal .report-details,
.crypto-donation-modal .success-modal .report-details,
.success-modal .report-details {
    background: linear-gradient(135deg, var(--rgba-white-98) 0%, var(--rgba-slate-99) 100%);
    border: 1px solid var(--rgba-primary-15);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin: 24px 0;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px var(--rgba-black-08), 0 4px 16px var(--rgba-black-04);
    position: relative;
    overflow: hidden;
}

.success-modal .report-details::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--primary-500) 50%, transparent 100%);
    opacity: 0.6;
}

.success-modal .success-message {
    background: linear-gradient(135deg, var(--rgba-primary-05) 0%, var(--rgba-primary-03) 100%);
    border: 1px solid var(--rgba-primary-15);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 2px 8px var(--rgba-primary-10);
}

.success-modal .success-message i {
    color: var(--primary-600);
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}



.success-modal .report-details h4 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-800);
    margin: 0 0 24px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.success-modal .report-details h4::before {
    content: '📋';
    font-size: 1.4em;
    filter: drop-shadow(0 2px 4px var(--rgba-primary-20));
}

.success-modal .report-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--ui-gap-md);
    background: var(--gradient-primary-light);
    border: 1px solid var(--rgba-primary-15);
    border-radius: var(--ui-radius-lg);
    margin: var(--ui-gap-sm) 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px var(--rgba-primary-08), inset 0 1px 0 var(--rgba-white-20);
    position: relative;
    overflow: hidden;
}

.success-modal .report-detail-row:last-child {
    margin-bottom: 0;
}

.success-modal .report-detail-row:hover {
    background: var(--gradient-secondary-light);
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px var(--rgba-primary-15), 0 4px 12px var(--rgba-primary-10), inset 0 1px 0 var(--rgba-white-30);
    border-color: var(--rgba-primary-25);
}

.success-modal .report-detail-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary-700);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: var(--ui-gap-sm);
    min-width: 140px;
    position: relative;
    text-shadow: 0 1px 2px var(--rgba-white-50);
    padding-top: var(--ui-gap-md);
}

.success-modal .report-detail-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    background: var(--rgba-white-95);
    padding: var(--ui-gap-md) var(--ui-gap-lg);
    border-radius: var(--ui-radius-md);
    border: 1px solid var(--rgba-primary-15);
    word-break: break-all;
    max-width: 60%;
    text-align: right;
    box-shadow: 0 2px 8px var(--rgba-black-05), inset 0 1px 2px var(--rgba-white-80);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.success-modal .report-detail-value.amount {
    background: var(--gradient-report-amount);
    color: var(--success-700);
    border-color: var(--rgba-success-30);
    font-weight: 700;
    font-size: 1.1rem;
    font-family: inherit;
    box-shadow: 0 4px 12px var(--rgba-success-15), inset 0 1px 2px var(--rgba-white-60);
}

.success-modal .report-detail-value.network {
    background: var(--gradient-report-network);
    color: var(--purple-700);
    border-color: var(--rgba-purple-30);
    font-weight: 600;
    font-family: inherit;
    box-shadow: 0 4px 12px var(--rgba-purple-15), inset 0 1px 2px var(--rgba-white-60);
}

.success-modal .report-detail-value:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px var(--rgba-black-12), 0 4px 12px var(--rgba-primary-15), inset 0 1px 3px var(--rgba-white-70), inset 0 -1px 1px var(--rgba-black-05);
    border-color: var(--rgba-primary-35);
}

.success-modal .report-detail-label::before {
    font-size: 1.1em;
    opacity: 0.9;
    margin-right: 2px;
    filter: drop-shadow(0 1px 2px var(--rgba-primary-20));
}

.success-modal .report-detail:has(.report-detail-label:contains('Report ID')) .report-detail-label::before {
    content: '🆔';
}

.success-modal .report-detail:has(.report-detail-label:contains('Amount')) .report-detail-label::before {
    content: '💰';
}

.success-modal .report-detail:has(.report-detail-label:contains('Network')) .report-detail-label::before {
    content: '🌐';
}

.success-modal .report-detail:has(.report-detail-label:contains('Transaction')) .report-detail-label::before {
    content: '🔗';
}

.success-modal .report-detail-label::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary-line);
    transition: width 0.3s ease;
}

.success-modal .report-detail-row:hover .report-detail-label::after {
    width: 100%;
}

/* Value and Copy Button Container */
.success-modal .report-detail-value-container {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-gap-md);
    flex: 1;
    justify-content: flex-end;
}

/* RTL Support for Success Modal */
[dir="rtl"] .success-modal .report-detail-row,
.rtl .success-modal .report-detail-row {
    direction: rtl;
    text-align: center;
}

/* Override modal-content RTL text-align for success modal */
[dir="rtl"] .modal-content .success-modal,
.rtl .modal-content .success-modal,
[dir="rtl"] .crypto-donation-modal .success-modal,
.rtl .crypto-donation-modal .success-modal {
    text-align: center;
    direction: rtl;
}

/* Prevent overlapping by ensuring proper spacing */
[dir="rtl"] .success-modal .report-detail,
.rtl .success-modal .report-detail {
    margin-bottom: var(--ui-gap-lg);
    padding: var(--ui-gap-md);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--ui-gap-sm);
    justify-content: center;
}

[dir="rtl"] .success-modal .report-detail-label,
.rtl .success-modal .report-detail-label {
    text-align: center;
    justify-content: center;
}

[dir="rtl"] .success-modal .report-detail-value,
.rtl .success-modal .report-detail-value {
    text-align: center;
    width: auto;
}

[dir="rtl"] .success-modal .report-detail-value-container,
.rtl .success-modal .report-detail-value-container {
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

[dir="rtl"] .success-modal .report-detail-label {
  padding-top: unset;
}

[dir="rtl"] .success-modal .copy-btn,
.rtl .success-modal .copy-btn {
    margin-right: 0;
    margin-left: 0;
    margin-top: var(--ui-gap-sm);
}

[dir="rtl"] .success-modal .what-happens-next,
.rtl .success-modal .what-happens-next {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .success-modal .step-item,
.rtl .success-modal .step-item {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .success-modal .step-text,
.rtl .success-modal .step-text {
    text-align: right;
}

[dir="rtl"] .success-modal .report-detail-label::before,
.rtl .success-modal .report-detail-label::before {
    margin-right: 0;
    margin-left: 2px;
}

[dir="rtl"] .success-modal .report-detail-label::after,
.rtl .success-modal .report-detail-label::after {
    left: auto;
    right: 0;
}

/* RTL Center Alignment for Success Modal Header Elements */
[dir="rtl"] .modal-overlay .success-animation,
[dir="rtl"] .crypto-donation-modal .success-animation,
[dir="rtl"] .success-animation,
.rtl .modal-overlay .success-animation,
.rtl .crypto-donation-modal .success-animation,
.rtl .success-animation {
    text-align: center;
    direction: rtl;
}

[dir="rtl"] .modal-overlay .success-modal h3,
[dir="rtl"] .crypto-donation-modal .success-modal h3,
[dir="rtl"] .success-modal h3,
.rtl .modal-overlay .success-modal h3,
.rtl .crypto-donation-modal .success-modal h3,
.rtl .success-modal h3 {
    text-align: center;
    direction: rtl;
}

[dir="rtl"] .modal-overlay .success-modal p,
[dir="rtl"] .crypto-donation-modal .success-modal p,
[dir="rtl"] .success-modal p,
.rtl .modal-overlay .success-modal p,
.rtl .crypto-donation-modal .success-modal p,
.rtl .success-modal p {
    text-align: center;
    direction: rtl;
}

.success-modal .copy-btn {
    background: var(--gradient-primary-light);
    border: 1px solid var(--rgba-primary-20);
    color: var(--primary-700);
    cursor: pointer;
    padding: var(--ui-gap-sm) var(--ui-gap-md);
    border-radius: var(--ui-radius-md);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--ui-gap-sm);
    box-shadow: 0 2px 8px var(--rgba-primary-08), inset 0 1px 0 var(--rgba-white-30);
    position: relative;
    overflow: hidden;
    margin-top: var(--ui-gap-md);
    flex-shrink: 0;
}

.success-modal .copy-btn:hover {
    background: var(--gradient-secondary-light);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 16px var(--rgba-primary-20), 0 3px 8px var(--rgba-primary-15), inset 0 1px 0 var(--rgba-white-40);
    border-color: var(--rgba-primary-35);
    color: var(--primary-800);
}

.success-modal .copy-btn:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 2px 8px var(--rgba-primary-15), inset 0 1px 0 var(--rgba-white-20);
    transition: all 0.1s ease;
}

.success-modal .copy-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--rgba-white-20), transparent);
    transition: left 0.5s ease;
}

.success-modal .copy-btn:hover::before {
    left: 100%;
}

.success-modal .what-happens-next{background:var(--gradient-what-happens-next);border: 1px solid var(--rgba-primary-15);border-radius: var(--ui-radius-lg);padding: var(--ui-gap-lg);margin: var(--ui-gap-lg) 0;backdrop-filter: var(--blur-sm);}

.success-modal .what-happens-next h4{font-size:1.125rem;font-weight: 700;color: var(--primary-800);margin: 0 0 20px 0;display: flex;align-items: center;gap: 8px;}

.success-modal .what-happens-next h4::before{content: '▶';font-size: 1.2em;}

.success-modal .step-list{list-style:none;padding: 0;margin: 0;}

.success-modal .step-item{display:flex;align-items: flex-start;gap: 16px;padding: 12px 0;font-size: 0.95rem;line-height: 1.5;color: var(--gray-600);}

.success-modal .step-number{background:var(--gradient-step-number);color: white;width: 28px;height: 28px;border-radius: var(--radius-full);display: flex;align-items: center;justify-content: center;font-size: 0.875rem;font-weight: 700;flex-shrink: 0;box-shadow: 0 4px 12px var(--rgba-primary-25);}

.success-modal .step-text{font-weight:500;padding-top: 2px;}

.success-modal .step-text strong{font-weight:700;color: var(--gray-800);}

.modal-overlay .success-modal-footer,
.crypto-donation-modal .success-modal-footer,
.success-modal-footer{display:flex;gap: 16px;justify-content: center;margin-top: 32px;padding-top: 24px;border-top: 1px solid var(--rgba-gray-30);}

.modal-overlay .success-modal-footer button,
.crypto-donation-modal .success-modal-footer button,
.success-modal-footer button{padding:16px 32px;border: none;border-radius: 12px;font-size: 1rem;font-weight: 600;cursor: pointer;transition: var(--transition-smooth);min-width: 140px;letter-spacing: 0.01em;}

.modal-overlay .success-modal-footer .btn-primary,
.crypto-donation-modal .success-modal-footer .btn-primary,
.success-modal-footer .btn-primary{background:var(--ui-success-bg);color: white;box-shadow: 0 8px 20px var(--rgba-success-30),0 4px 12px var(--rgba-success-20);}

.modal-overlay .success-modal-footer .btn-primary:hover,
.crypto-donation-modal .success-modal-footer .btn-primary:hover,
.success-modal-footer .btn-primary:hover{background: var(--gradient-btn-primary-hover-ui);transform: translateY(-2px);box-shadow: 0 12px 28px var(--rgba-success-50),0 6px 16px var(--rgba-success-30);}

.modal-overlay .success-modal-footer .btn-secondary,
.crypto-donation-modal .success-modal-footer .btn-secondary,
.success-modal-footer .btn-secondary{background:var(--ui-input-bg);color: var(--gray-700);border: 2px solid var(--border-light);box-shadow: var(--ui-input-shadow);}

.modal-overlay .success-modal-footer .btn-secondary:hover,
.crypto-donation-modal .success-modal-footer .btn-secondary:hover,
.success-modal-footer .btn-secondary:hover{background: var(--gradient-surface-light);transform: translateY(-1px);box-shadow: 0 6px 16px var(--rgba-black-10),0 3px 8px var(--rgba-black-06);border-color: var(--border-secondary);}


/* ===============================================
 MODAL BODY SCROLL PREVENTION
 =============================================== */
html.modal-open,
/* Note: Removed position: fixed to prevent WordPress footer positioning issues */
body.modal-open{overflow:hidden;/* position: fixed; */width: 100%;height: 100%;overscroll-behavior: none;touch-action: none;}

html.modal-open{position:static;}


/* ===============================================
 ANIMATIONS
 =============================================== */
@keyframes amountGlow {
    0%, 100% { 
        background-position: 0% 50%;
        transform: scale(1);
    }
    50% { 
        background-position: 100% 50%;
        transform: scale(1.02);
    }
}

@keyframes underlineGlow {
    0%, 100% { 
        width: 50px; 
        opacity: 0.6;
    }
    50% { 
        width: 70px; 
        opacity: 1;
    }
}

@keyframes amountUpdatePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes selectedAmountEnter {
    0% {
        transform: translateY(30px) scale(0.9);
        opacity: 0;
    }
    60% {
        transform: translateY(-5px) scale(1.02);
        opacity: 0.9;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}


/* ===============================================
 RESPONSIVE DESIGN
 =============================================== */
@media (max-width:768px){
 .slide-actions{flex-direction:column;gap: var(--ui-gap-md);margin-top: var(--ui-gap-lg);}
 .modal-overlay .prev-btn,
 .crypto-donation-modal .prev-btn,
 .modal-overlay .next-btn,
 .crypto-donation-modal .next-btn,
 .modal-overlay .proceed-btn,
 .crypto-donation-modal .proceed-btn,
 .prev-btn,.next-btn,.proceed-btn{width:100%;padding: var(--ui-gap-md) 20px;font-size: 1rem;border-radius: var(--ui-radius-md);min-height: 52px;transition: var(--transition-fast);}
 .modal-overlay{padding:0;align-items: flex-end;justify-content: center;}
 .modal-content{width:100%;margin: 0;max-height: 80vh;border-radius: 20px 20px 0 0;transform: translateY(100%);transition: transform 0.4s ease;box-shadow: 0 -8px 32px var(--rgba-black-25),0 -4px 16px var(--rgba-black-10);overscroll-behavior: contain;-webkit-overflow-scrolling: touch;}
 .modal-overlay.show .modal-content{transform:translateY(0);}
 /* Responsive modal styles consolidated in modals.css and responsive.css */
 /* .currency-icon-large responsive styles moved to modals.css to avoid duplication */
 .qr-code{width:min(220px,70vw);height: min(220px,70vw);border-radius: var(--ui-radius-md);margin: 0 auto var(--ui-gap-md);}
 .notification-container{top:var(--ui-gap-md);right: var(--ui-gap-md);left: var(--ui-gap-md);width: auto;}
 .notification{padding:var(--ui-gap-md) 20px;font-size: 0.95rem;border-radius: var(--ui-radius-sm);margin-bottom: var(--ui-gap-md);max-width: none;gap: var(--ui-gap-md);border-left-width: 3px;}
 body .crypto-donation-container .usd-amount{font-size:clamp(1.8rem,6vw,2.4rem);padding: 10px 14px;}
 /* .amount-summary .usd-amount styles moved to core.css */

 body .crypto-donation-container .selected-amount-display::before {
    border-radius: 20px;
 }
 body .crypto-donation-container .amount-summary{gap: 6px;}
 body .crypto-donation-container .amount-summary::before {
    font-size: 0.65rem;
    margin-bottom: 2px;
 }
 body .crypto-donation-container .crypto-equivalent{padding:var(--ui-gap-sm) var(--ui-gap-md);font-size: 1.2rem;}
 .success-modal .modal-title{font-size:clamp(1.3rem,5vw,1.6rem);font-weight: 800;margin-bottom: var(--ui-gap-md);}
 .success-modal .report-details,
 .success-modal .what-happens-next {
     padding: 20px 16px;
     margin: 20px 0;
     border-radius: 12px;
 }
 
 .success-modal .report-details h4,
 .success-modal .what-happens-next h4 {
     font-size: 1.1rem;
     margin-bottom: 16px;
 }
 
 .success-modal .report-detail-row {
     flex-direction: column;
     align-items: stretch;
     gap: var(--ui-gap-sm);
     padding: var(--ui-gap-md);
     margin: var(--ui-gap-sm) 0;
     background: var(--gradient-primary-light);
     border-radius: var(--ui-radius-md);
 }
 
 .success-modal .report-detail-row:hover {
     transform: translateY(-1px);
     background: var(--gradient-secondary-light);
     box-shadow: 0 4px 12px var(--rgba-primary-12), 0 2px 6px var(--rgba-primary-08);
 }
 
 .success-modal .report-detail-label {
     min-width: auto;
     font-size: 0.8rem;
     justify-content: flex-start;
     margin-bottom: 4px;
 }
 
 .success-modal .report-detail-value {
     max-width: 100%;
     width: 100%;
     text-align: left;
     font-size: 0.9rem;
     padding: var(--ui-gap-sm) var(--ui-gap-md);
     word-break: break-word;
 }

 .success-modal .copy-btn {
     margin-left: 0;
     margin-top: var(--ui-gap-sm);
     align-self: flex-start;
     padding: var(--ui-gap-sm);
     font-size: 0.8rem;
 }
 
 .success-modal .success-message {
     padding: 14px 16px;
     gap: 10px;
 }
 

 .success-modal .step-item{gap:var(--ui-gap-md);padding: var(--ui-gap-md) 0;font-size: 0.9rem;}
 .success-modal .step-number{width:24px;height: 24px;font-size: 0.8rem;}
 .success-modal-footer{gap:var(--ui-gap-md);flex-direction: column;padding: 20px var(--ui-gap-md) var(--ui-gap-lg);}
 .success-modal-footer button{width:100%;padding: var(--ui-gap-md) var(--ui-gap-lg);font-size: 1rem;min-width: auto;}
}


/* ===============================================
 FINAL OPTIMIZATIONS
 =============================================== */
/* Button styles consolidated in amount-selection.css and core.css for better organization */


/* ========== frontend\utilities.css ========== */
/* ==========================================================================
   CSS Utilities - Common Patterns and Reusable Classes
   Uses unified tokens from shared/tokens.css
   ========================================================================== */

/* tokens.css imported globally via main.css */

/* Transition Utilities - Using Unified Tokens */
.transition-smooth {
  transition: var(--transition-smooth);
}

.transition-fast {
  transition: var(--transition-fast);
}

.transition-slow {
  transition: var(--transition-bouncy);
}

.transition-transform {
  transition: transform var(--duration-normal) var(--ease-out);
}

/* Layout Utilities */
.center-auto {
  margin-inline: auto;
}

/* Legacy support for older browsers */
@supports not (margin-inline: auto) {
  .center-auto {
    margin-left: auto;
    margin-right: auto;
  }
}

.max-width-600 {
  max-width: 600px;
}

.max-width-520 {
  max-width: 520px;
}

.max-width-full {
  max-width: 100%;
}

/* ===============================================
   MODERN CSS GRID UTILITIES
   =============================================== */

/* Basic Grid Layouts */
.grid-2-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.grid-3-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.grid-4-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

/* Responsive Grid Layouts */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-lg), 1fr));
  gap: var(--space-md);
}

.grid-auto-fit-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-sm), 1fr));
  gap: var(--space-sm);
}

.grid-auto-fit-lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-2xl), 1fr));
  gap: var(--space-lg);
}

/* Advanced Grid Layouts */
.grid-sidebar {
  display: grid;
  grid-template-columns: var(--grid-col-md) 1fr;
  gap: var(--space-lg);
}

.grid-sidebar-right {
  display: grid;
  grid-template-columns: 1fr var(--grid-col-md);
  gap: var(--space-lg);
}

.grid-holy-grail {
  display: grid;
  grid-template-columns: var(--grid-col-sm) 1fr var(--grid-col-sm);
  grid-template-rows: auto 1fr auto;
  gap: var(--space-md);
  min-height: 100vh;
}

/* Grid Areas */
.grid-header { grid-area: header; }
.grid-main { grid-area: main; }
.grid-sidebar { grid-area: sidebar; }
.grid-footer { grid-area: footer; }

/* Crypto-specific Grid Layouts */
.crypto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Keep specific value for crypto buttons */
  gap: var(--space-md);
  align-items: start;
}

.donation-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-lg);
  align-items: center;
}

.modal-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  align-items: start;
}

/* Grid Item Utilities */
.grid-span-2 { grid-column: span 2; }
.grid-span-3 { grid-column: span 3; }
.grid-span-4 { grid-column: span 4; }
.grid-span-full { grid-column: 1 / -1; }

.grid-row-span-2 { grid-row: span 2; }
.grid-row-span-3 { grid-row: span 3; }
.grid-row-span-full { grid-row: 1 / -1; }

/* Grid Alignment */
.grid-center {
  place-items: center;
}

.grid-start {
  place-items: start;
}

.grid-end {
  place-items: end;
}

.grid-stretch {
  place-items: stretch;
}

/* Responsive Grid Breakpoints */
@media (max-width: 768px) {
  .grid-2-cols,
  .grid-3-cols,
  .grid-4-cols {
    grid-template-columns: 1fr;
  }
  
  .grid-sidebar,
  .grid-sidebar-right {
    grid-template-columns: 1fr;
  }
  
  .grid-holy-grail {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
  
  .donation-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .modal-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* Gap Utilities - Using Unified Spacing Tokens */
.gap-xs {
  gap: var(--space-xs);
}

.gap-sm {
  gap: var(--space-sm);
}

.gap-md {
  gap: var(--space-md);
}

.gap-lg {
  gap: var(--space-lg);
}

.gap-xl {
  gap: var(--space-xl);
}

.gap-2xl {
  gap: var(--space-2xl);
}

.gap-3xl {
  gap: var(--space-3xl);
}

/* Padding Utilities - Using Unified Spacing Tokens */
.padding-xs {
  padding: var(--space-xs);
}

.padding-sm {
  padding: var(--space-sm);
}

.padding-md {
  padding: var(--space-md);
}

.padding-lg {
  padding: var(--space-lg);
}

.padding-xl {
  padding: var(--space-xl);
}

.padding-2xl {
  padding: var(--space-2xl);
}

.padding-3xl {
  padding: var(--space-3xl);
}

/* Directional Padding Utilities - Using Logical Properties */
.px-xs { padding-inline: var(--space-xs); }
.px-sm { padding-inline: var(--space-sm); }
.px-md { padding-inline: var(--space-md); }
.px-lg { padding-inline: var(--space-lg); }
.px-xl { padding-inline: var(--space-xl); }

.py-xs { padding-block: var(--space-xs); }
.py-sm { padding-block: var(--space-sm); }
.py-md { padding-block: var(--space-md); }
.py-lg { padding-block: var(--space-lg); }
.py-xl { padding-block: var(--space-xl); }

/* Legacy support for older browsers */
@supports not (padding-inline: var(--space-xs)) {
  .px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
  .px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  .px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
  .px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
  .px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }

  .py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
  .py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
  .py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
  .py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
  .py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
}

/* Additional Logical Spacing Utilities */
.ml-auto { margin-inline-start: auto; }
.mr-auto { margin-inline-end: auto; }
.pl-1 { padding-inline-start: var(--space-xs); }
.pr-1 { padding-inline-end: var(--space-xs); }
.pl-2 { padding-inline-start: var(--space-sm); }
.pr-2 { padding-inline-end: var(--space-sm); }
.pl-3 { padding-inline-start: var(--space-md); }
.pr-3 { padding-inline-end: var(--space-md); }
.pt-1 { padding-block-start: var(--space-xs); }
.pb-1 { padding-block-end: var(--space-xs); }
.pt-2 { padding-block-start: var(--space-sm); }
.pb-2 { padding-block-end: var(--space-sm); }
.pt-3 { padding-block-start: var(--space-md); }
.pb-3 { padding-block-end: var(--space-md); }

/* Component-specific Padding */
.padding-button { padding: var(--space-lg) var(--space-2xl); }
.padding-card { padding: var(--space-xl); }

/* Border Radius Utilities - Using Unified Tokens */
.radius-xs {
    border-radius: var(--radius-xs);
}

.radius-sm {
    border-radius: var(--radius-sm);
}

.radius-md {
    border-radius: var(--radius-md);
}

.radius-lg {
    border-radius: var(--radius-lg);
}

.radius-xl {
    border-radius: var(--radius-xl);
}

.radius-2xl {
    border-radius: var(--radius-2xl);
}

.radius-3xl {
    border-radius: var(--radius-3xl);
}

.radius-full {
    border-radius: var(--radius-full);
}

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

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

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

.gradient-surface-light {
    background: var(--gradient-neutral-light);
}

.gradient-surface-medium {
    background: var(--gradient-neutral-medium);
}

.gradient-surface-dark {
    background: var(--gradient-surface-dark);
}

.gradient-primary-soft {
    background: var(--gradient-primary-light);
}

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

.gradient-warning-soft {
    background: var(--gradient-warning-soft);
}

.gradient-shimmer {
    background: var(--gradient-shimmer);
}

.gradient-scrollbar {
    background: var(--gradient-scrollbar);
}

.gradient-scrollbar-hover {
    background: var(--gradient-scrollbar-hover);
}

/* Price change utilities - consolidated from multiple files */
.price-change {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: var(--transition-normal);
    margin: 0;
    white-space: nowrap;
    min-width: 60px;
}

.price-change.positive {
    color: var(--success-600);
    background: var(--rgba-green-129-10);
}

.price-change.negative {
    color: var(--error-500);
    background: var(--rgba-error-68-10);
}

.price-change::before {
    content: '↗';
    font-size: 0.9em;
}

.price-change.negative::before {
    content: '↘';
}

/* Responsive price change styles */
@media (max-width: 768px) {
    .price-change {
        font-size: 0.75rem;
        padding: 2px 6px;
        gap: 2px;
        margin-top: 2px;
    }
}

/* ===============================================
   BUTTON UTILITIES
   =============================================== */

/* Button base utilities - shared properties only */
.btn-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    box-sizing: border-box;
}

.btn-base:focus {
    outline: 2px solid transparent;
}

.btn-base:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--primary-100);
}

.btn-base:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Universal Shine Animation Utility */
.btn-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-btn-shine);
    transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    pointer-events: none;
}

.btn-shine:hover::before {
    left: 100%;
}

/* Ensure button content stays above shine effect */
.btn-shine > * {
    position: relative;
    z-index: 2;
}

/* Responsive button utilities - consolidated from multiple files */
@media (max-width: 768px) {
    .amount-btn {
        padding: 10px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

    .custom-amount-btn {
        padding: 12px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

    .amount-btn .amount-text {
        font-size: 0.85rem;
    }

    .amount-btn .currency-symbol {
        font-size: 0.8rem;
    }

    /* Custom amount button mobile styles - Maximum specificity */
    .crypto-donation-container .carousel-container .amount-btn.custom .desktop-text,
    .crypto-donation-container .amount-btn.custom .desktop-text,
    [id*="crypto-donation"] .amount-btn.custom .desktop-text,
    div.crypto-donation-container .amount-btn.custom .desktop-text {
        display: none;
    }
    
    .crypto-donation-container .carousel-container .amount-btn.custom .desktop-icon,
    .crypto-donation-container .amount-btn.custom .desktop-icon,
    [id*="crypto-donation"] .amount-btn.custom .desktop-icon,
    div.crypto-donation-container .amount-btn.custom .desktop-icon {
        display: none;
    }
    
    .crypto-donation-container .carousel-container .amount-btn.custom .mobile-icon,
    .crypto-donation-container .amount-btn.custom .mobile-icon,
    [id*="crypto-donation"] .amount-btn.custom .mobile-icon,
    div.crypto-donation-container .amount-btn.custom .mobile-icon {
        display: inline;
        font-size: 2rem;
        font-weight: 300;
        line-height: 1;
    }

    /* Crypto grid responsive */
    .crypto-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .crypto-btn {
        padding: 12px 16px;
        gap: 10px;
        min-height: 80px;
    }
}

/* Font utilities */
.font-xs {
    font-size: 0.75rem; /* 12px */
}

.font-sm {
    font-size: 0.875rem; /* 14px */
}

.font-base {
    font-size: 1rem; /* 16px */
}

.font-lg {
    font-size: 1.125rem; /* 18px */
}

.font-xl {
    font-size: 1.25rem; /* 20px */
}

.font-2xl {
    font-size: 1.5rem; /* 24px */
}

.font-3xl {
    font-size: 1.875rem; /* 30px */
}

.font-4xl {
    font-size: 2.25rem; /* 36px */
}

.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

.font-black {
    font-weight: 900;
}

.leading-none {
    line-height: 1;
}

.leading-tight {
    line-height: 1.2;
}

.leading-normal {
    line-height: 1.5;
}

.leading-relaxed {
    line-height: 1.6;
}

/* Position utilities */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

/* Z-index utilities */
.z-0 {
    z-index: 0;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.z-10 {
    z-index: 10;
}

.z-15 {
    z-index: 15;
}

.z-20 {
    z-index: 20;
}

.z-25 {
    z-index: 25;
}

.z-50 {
    z-index: 50;
}

.z-modal {
    z-index: 9999;
}

.z-notification {
    z-index: 10000;
}

/* Border radius utilities */
.rounded-none {
    border-radius: 0;
}

.rounded-xs {
    border-radius: 2px;
}

.rounded-sm {
    border-radius: 4px;
}

.rounded {
    border-radius: 6px;
}

.rounded-md {
    border-radius: 8px;
}

.rounded-lg {
    border-radius: 10px;
}

.rounded-xl {
    border-radius: 12px;
}

.rounded-2xl {
    border-radius: 16px;
}

.rounded-3xl {
    border-radius: 20px;
}

.rounded-full {
    border-radius: 50%;
}

.rounded-button {
    border-radius: var(--ui-radius-sm, 6px);
}

.rounded-card {
    border-radius: var(--radius-md, 8px);
}

/* Box Shadow Utilities */
.shadow-sm {
  box-shadow: var(--shadow-sm, 0 1px 2px var(--rgba-black-05));
}

.shadow-md {
  box-shadow: var(--shadow-md, 0 4px 6px var(--rgba-black-10));
}

.shadow-lg {
  box-shadow: var(--shadow-lg, 0 10px 15px var(--rgba-black-10));
}

.shadow-xl {
  box-shadow: var(--shadow-xl, 0 20px 25px var(--rgba-black-10));
}

/* Common Component Patterns */
.modal-base {
  background: var(--ui-modal-bg, var(--gradient-surface));
  border: 1px solid var(--rgba-white-18);
  border-radius: var(--radius-2xl, 24px);
  max-width: 520px;
  width: 92%;
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  margin: 0 auto;
  animation: modalSlideIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: var(--shadow-xl), 0 0 0 1px var(--rgba-white-05);
  backdrop-filter: var(--backdrop-blur-medium, blur(12px));
  pointer-events: auto;
  touch-action: manipulation;
  scrollbar-width: thin;
  scrollbar-color: var(--rgba-primary-30) transparent;
}

.button-base {
  padding: 16px 12px;
  border: 2px solid transparent;
  border-radius: var(--radius-lg, 16px);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.input-base {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--border-light, #e5e7eb);
  border-radius: var(--radius-md, 12px);
  font-size: 1rem;
  background: var(--ui-input-bg, #ffffff);
  transition: all 0.2s ease;
  box-shadow: var(--ui-input-shadow, 0 1px 2px var(--rgba-black-05));
}

/* Responsive Utilities */
@media (max-width: 768px) {
  /* Simplified modal animations for mobile performance */
  .modal-base {
    animation: modalSlideInMobile 0.3s ease-out;
  }
  
  .mobile-full-width {
    max-width: 100%;
    width: 100%;
  }
  
  .mobile-padding-sm {
    padding: 0 4px;
  }
  
  .mobile-gap-sm {
    gap: 10px;
  }
}

@media (max-width: 480px) {
  /* Ultra-simplified modal animations for small mobile devices */
  .modal-base {
    animation: modalSlideInMobile 0.2s ease-out;
  }
  
  .mobile-sm-padding-xs {
    padding: 0 4px;
  }
  
  .mobile-sm-gap-xs {
    gap: 8px;
  }
}

/* ========== frontend\crypto-buttons.css ========== */
/* ===============================================
   CRYPTOCURRENCY BUTTONS
   Uses unified tokens from shared/tokens.css
   =============================================== */

/* tokens.css imported globally via main.css */

/* ===============================================
 CRYPTO GRID & BUTTON SYSTEM
 =============================================== */

/* ===============================================
 CRYPTO GRID LAYOUT
 =============================================== */

.crypto-grid { 
 display: grid; 
 grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-lg), 1fr)); 
 gap: 16px; 
 max-width: 100%; 
 margin: 24px auto 0; 
 padding: 20px; 
 width: 100%; 
 justify-items: center; 
}

/* Crypto Button Base - Restored Original Styles */
.crypto-donation-container .crypto-btn,
.crypto-donation-container .cdc-crypto-button-widget,
[id*="crypto-donation"] .cdc-crypto-button-widget,
div.crypto-donation-container .crypto-btn.cdc-crypto-button-widget {
 position: relative;
 padding: 20px 20px;
 background: var(--gradient-crypto-btn-base);
 border: 2px solid var(--rgba-black-06);
 border-radius: var(--radius-2xl);
 cursor: pointer;
 transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 display: flex;
 align-items: center;
 gap: 20px;
 min-height: 120px;
 color: var(--gray-800);
 box-shadow: var(--shadow-card);
 overflow: hidden;
 backdrop-filter: blur(10px);
 text-decoration: none;
 box-sizing: border-box;
 width: 100%;
 font-family: inherit;
 font-size: inherit;
 line-height: inherit;
}

.crypto-btn::before {
 content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
 background: var(--gradient-primary); opacity: 0; transition: var(--transition-smooth);
 z-index: 0;
}

/* Unified shine animation - consistent with btn-shine utility */
.crypto-btn::after {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: var(--gradient-btn-shine);
 transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 z-index: 1;
 pointer-events: none;
}



/* ===============================================
 6. CRYPTO BUTTONS - HOVER & ACTIVE STATES
 =============================================== */

.crypto-donation-container .crypto-btn:hover:not(.disabled):not(.below-minimum),
.crypto-donation-container .cdc-crypto-button-widget:hover:not(.disabled):not(.below-minimum),
[id*="crypto-donation"] .cdc-crypto-button-widget:hover:not(.disabled):not(.below-minimum),
div.crypto-donation-container .crypto-btn.cdc-crypto-button-widget:hover:not(.disabled):not(.below-minimum) {
 border-color: var(--primary-400);
 transform: translateY(-6px) scale(1.02);
 box-shadow: 0 20px 40px var(--rgba-primary-15), 0 8px 20px var(--rgba-primary-10);
 text-decoration: none;
 color: inherit;
}

.crypto-donation-container .crypto-btn:hover::before {
 opacity: 0.05;
}

.crypto-donation-container .crypto-btn:hover::after {
 left: 100%;
}

.crypto-donation-container .crypto-btn.selected,
.crypto-donation-container .cdc-crypto-button-widget.selected,
[id*="crypto-donation"] .cdc-crypto-button-widget.selected,
div.crypto-donation-container .crypto-btn.cdc-crypto-button-widget.selected {
 background: var(--gradient-crypto-btn-selected);
 border-color: var(--success-600);
 color: white;
 transform: translateY(-4px) scale(1.02);
 box-shadow: var(--shadow-success-glow);
 text-decoration: none;
 font-family: inherit;
 line-height: inherit;
}

/* Focus-visible styles for better keyboard navigation */
.crypto-donation-container .crypto-btn:focus-visible,
.crypto-donation-container .cdc-crypto-button-widget:focus-visible,
[id*="crypto-donation"] .cdc-crypto-button-widget:focus-visible,
div.crypto-donation-container .crypto-btn.cdc-crypto-button-widget:focus-visible {
 outline: 3px solid var(--primary-500);
 outline-offset: 3px;
 box-shadow: 0 0 0 6px var(--primary-100), 0 20px 40px var(--rgba-primary-15);
}

.crypto-btn.selected::before {
 opacity: 0;
}



/* ===============================================
 7. CRYPTO BUTTONS - ICON STYLING
 =============================================== */

/* Crypto Icon Container */
.crypto-icon {
 position: relative; z-index: 3; flex-shrink: 0; width: 60px; height: 60px;
 display: flex; align-items: center; justify-content: center;
 background: var(--gradient-icon); border-radius: var(--radius-icon);
 border: 2px solid var(--border-light); transition: var(--transition-smooth);
}

.crypto-donation-container .crypto-btn:hover .crypto-icon,
.cdc-crypto-button-widget:hover .crypto-icon,
.crypto-btn.cdc-crypto-button-widget:hover .crypto-icon {
 transform: scale(1.1) rotate(5deg);
 background: var(--gradient-crypto-icon-hover);
 border-color: var(--rgba-primary-30);
}

.crypto-donation-container .crypto-btn.selected .crypto-icon,
.cdc-crypto-button-widget.selected .crypto-icon,
.crypto-btn.cdc-crypto-button-widget.selected .crypto-icon {
 background: var(--rgba-white-20);
 border-color: var(--rgba-white-30);
 transform: scale(1.05);
}

/* Font Awesome Icons */
.crypto-donation-container .crypto-btn i {
 font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome", sans-serif;
 font-weight: 900; font-style: normal; text-decoration: none; line-height: 1;
 font-size: 2.5rem; width: 64px; height: 64px; display: flex;
 align-items: center; justify-content: center; border-radius: var(--radius-lg);
 background: var(--surface-secondary); color: var(--text-tertiary); position: relative;
 overflow: hidden; transition: var(--transition-smooth); z-index: 3;
}

/* Brand icons need font-weight 400 - override the 900 above */
.crypto-donation-container .crypto-btn i.fab {
 font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome", sans-serif;
 font-weight: 400;
}

.crypto-donation-container .crypto-btn:hover i {
 transform: scale(1.05); background: var(--surface-tertiary);
}

/* Cryptocurrency specific icon colors */
.crypto-btn[data-crypto="bitcoin"] i,
.cdc-crypto-button-widget[data-crypto="bitcoin"] i,
.crypto-btn.cdc-crypto-button-widget[data-crypto="bitcoin"] i {
 color: var(--bitcoin-color); background: var(--bitcoin-bg);
}

.crypto-btn[data-crypto="ethereum"] i,
.cdc-crypto-button-widget[data-crypto="ethereum"] i,
.crypto-btn.cdc-crypto-button-widget[data-crypto="ethereum"] i {
 color: var(--ethereum-color); background: var(--ethereum-bg);
}

.crypto-btn[data-crypto="tether"] i,
.crypto-btn[data-crypto="usdt"] i,
.cdc-crypto-button-widget[data-crypto="tether"] i,
.cdc-crypto-button-widget[data-crypto="usdt"] i,
.crypto-btn.cdc-crypto-button-widget[data-crypto="tether"] i,
.crypto-btn.cdc-crypto-button-widget[data-crypto="usdt"] i {
 color: var(--tether-color); background: var(--tether-bg);
}

.crypto-btn[data-crypto="litecoin"] i,
.cdc-crypto-button-widget[data-crypto="litecoin"] i,
.crypto-btn.cdc-crypto-button-widget[data-crypto="litecoin"] i {
 color: var(--litecoin-color); background: var(--litecoin-bg);
}

.crypto-btn[data-crypto="binance"] i,
.crypto-btn[data-crypto="bnb"] i,
.cdc-crypto-button-widget[data-crypto="binance"] i,
.cdc-crypto-button-widget[data-crypto="bnb"] i,
.crypto-btn.cdc-crypto-button-widget[data-crypto="binance"] i,
.crypto-btn.cdc-crypto-button-widget[data-crypto="bnb"] i {
 color: var(--binance-color); background: var(--binance-bg);
}

.crypto-btn[data-crypto="bitcoin"]:hover i { background: var(--warning-100); }
.crypto-btn[data-crypto="ethereum"]:hover i { background: var(--primary-100); }
.crypto-btn[data-crypto="tether"]:hover i,
.crypto-btn[data-crypto="usdt"]:hover i { background: var(--success-100); }

.crypto-donation-container .crypto-btn.selected i {
 background: var(--action-secondary); color: white; transform: scale(1.05);
}

/* ===============================================
 CRYPTO BUTTONS - TEXT & CONTENT
 =============================================== */

.crypto-info {
 position: relative;
 z-index: 2;
 flex: 1;
 display: flex;
 flex-direction: column;
 gap: 6px;
 align-items: flex-start;
 justify-content: center;
}

.crypto-price-info {
 position: relative;
 z-index: 2;
 text-align: right;
 min-width: 120px;
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 justify-content: center;
 gap: 4px;
}

.crypto-donation-container .crypto-name {
 display: block;
 font-size: 1.2rem;
 font-weight: 800;
 margin-bottom: 6px;
 letter-spacing: -0.02em;
 text-decoration: none;
 font-family: inherit;
 line-height: inherit;
}

body .crypto-donation-container .crypto-symbol,
html body .crypto-donation-container .crypto-symbol,
.wp-content .crypto-donation-container .crypto-symbol,
.site-content .crypto-donation-container .crypto-symbol,
.crypto-donation-container .crypto-symbol {
 display: block;
 font-size: 1rem;
 opacity: 0.7;
 font-weight: 600;
 text-decoration: none;
 outline: none;
 font-family: inherit;
 line-height: inherit;
}

/* Crypto button text base styles */
body .crypto-donation-container .crypto-btn span,
html body .crypto-donation-container .crypto-btn span,
.wp-content .crypto-donation-container .crypto-btn span,
.site-content .crypto-donation-container .crypto-btn span,
.crypto-donation-container .crypto-btn span {
 font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em;
 color: var(--text-primary); transition: var(--transition-normal);
 text-decoration: none; outline: none; font-family: inherit; line-height: inherit;
}

/* Selected state text styles */
body .crypto-donation-container .crypto-btn.selected .crypto-name,
body .crypto-donation-container .crypto-btn.selected .crypto-symbol,
body .crypto-donation-container .crypto-btn.selected span,
html body .crypto-donation-container .crypto-btn.selected .crypto-name,
html body .crypto-donation-container .crypto-btn.selected .crypto-symbol,
html body .crypto-donation-container .crypto-btn.selected span,
.wp-content .crypto-donation-container .crypto-btn.selected .crypto-name,
.wp-content .crypto-donation-container .crypto-btn.selected .crypto-symbol,
.wp-content .crypto-donation-container .crypto-btn.selected span,
.site-content .crypto-donation-container .crypto-btn.selected .crypto-name,
.site-content .crypto-donation-container .crypto-btn.selected .crypto-symbol,
.site-content .crypto-donation-container .crypto-btn.selected span,
.crypto-donation-container .crypto-btn.selected .crypto-name,
.crypto-donation-container .crypto-btn.selected .crypto-symbol,
.crypto-donation-container .crypto-btn.selected span,
.cdc-crypto-button-widget.selected .crypto-name,
.cdc-crypto-button-widget.selected .crypto-symbol,
.cdc-crypto-button-widget.selected .crypto-price,
.crypto-btn.cdc-crypto-button-widget.selected .crypto-name,
.crypto-btn.cdc-crypto-button-widget.selected .crypto-symbol,
.crypto-btn.cdc-crypto-button-widget.selected .crypto-price {
 color: white;
 text-decoration: none;
 outline: none;
 font-family: inherit;
 line-height: inherit;
}



/* ===============================================
 PRICE DISPLAY & CHANGE INDICATORS
 =============================================== */

.crypto-price {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--gray-700);
    transition: var(--transition-normal);
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
}

.crypto-btn.selected .crypto-price {
    color: var(--rgba-white-90);
}

.crypto-btn.selected .price-change.positive,
.crypto-btn.selected .price-change.negative {
    color: var(--rgba-white-90);
    background: var(--rgba-white-10);
}

/* ===============================================
 PRICE CHANGE INDICATORS & LOADING STATES
 =============================================== */

.loading-dots {
    animation: loadingDotsPulse 1.5s ease-in-out infinite;
    color: var(--gray-500);
}

@keyframes loadingDotsPulse {
    0%, 100% {
        background-position: 0% 50%;
        opacity: 0.7;
    }
    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
}

@keyframes rotateCoin {
    0%, 100% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(180deg);
    }
}

/* ===============================================
   RESPONSIVE BREAKPOINTS FOR CRYPTO GRID
   =============================================== */

/* Extra Large Desktop */
@media screen and (min-width: 1400px) {
    .crypto-grid { 
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); /* Keep specific value for large crypto buttons */ 
        max-width: 1200px; 
        gap: 24px; 
    }
}

/* ===============================================
   DISABLED CRYPTO BUTTON STYLES
   =============================================== */

/* Disabled crypto button styles */
.crypto-btn.disabled,
.crypto-btn.below-minimum {
    background: #f8f9fa;
    color: #adb5bd;
    border-color: #dee2e6;
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    position: relative;
}

.crypto-btn.disabled .crypto-icon,
.crypto-btn.below-minimum .crypto-icon {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* Minimum amount display for disabled buttons only */
.crypto-btn.disabled .min-amount-display,
.crypto-btn.below-minimum .min-amount-display {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--notification-warning-bg, var(--warning-500, #f59e0b));
    color: var(--notification-warning-text, white);
    padding: var(--space-xs, 3px) var(--space-sm, 10px);
    border-radius: var(--radius-sm, 6px);
    font-size: var(--font-size-xs, 11px);
    font-weight: var(--font-weight-semibold, 600);
    white-space: nowrap;
    z-index: 3;
    box-shadow: var(--shadow-sm, 0 2px 4px var(--rgba-warning-25, rgba(245, 158, 11, 0.25)));
    transition: all 0.2s ease;
    max-width: calc(100% - 12px);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile responsive styles for min-amount-display */
@media screen and (max-width: 768px) {
    .crypto-btn.disabled .min-amount-display,
    .crypto-btn.below-minimum .min-amount-display {
        bottom: 4px;
        padding: 2px 8px;
        font-size: clamp(9px, 2.5vw, 11px);
        border-radius: 4px;
        max-width: calc(100% - 8px);
        line-height: 1.2;
    }
}

@media screen and (max-width: 480px) {
    .crypto-btn.disabled .min-amount-display,
    .crypto-btn.below-minimum .min-amount-display {
        bottom: 3px;
        padding: 1px 6px;
        font-size: clamp(8px, 2vw, 10px);
        border-radius: 3px;
        max-width: calc(100% - 6px);
        font-weight: 500;
    }
}

/* Extra small screens */
@media screen and (max-width: 360px) {
    .crypto-btn.disabled .min-amount-display,
    .crypto-btn.below-minimum .min-amount-display {
        bottom: 2px;
        padding: 1px 4px;
        font-size: 8px;
        max-width: calc(100% - 4px);
        letter-spacing: -0.02em;
    }
}

.crypto-btn.disabled .min-amount-display small,
.crypto-btn.below-minimum .min-amount-display small {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

/* Hide minimum amount display on enabled buttons */
.crypto-btn:not(.disabled):not(.below-minimum) .min-amount-display {
    display: none;
}




/* ========== frontend\amount-selection.css ========== */
/* ===============================================
   AMOUNT SELECTION & INPUT
   Uses unified tokens from shared/tokens.css
   =============================================== */

/* tokens.css imported globally via main.css */

.crypto-amount-summary {
 font-size: 16px;
 font-weight: 500;
 color: var(--color-slate-500);
 padding: 8px 16px;
 background: var(--rgba-slate-08);
 border-radius: var(--radius-md);
 border: 1px solid var(--rgba-slate-12);
}

/* Modal close button styles moved to modals.css to avoid duplication */

/* Currency Icon */
.currency-icon-large {
 width: 80px;
 height: 80px;
 background: var(--gradient-currency-icon);
 border: 2px solid var(--rgba-primary-20);
 border-radius: var(--radius-xl);
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto 24px;
 box-shadow:
 0 8px 32px var(--rgba-primary-15),
    0 4px 16px var(--rgba-primary-10),
 inset 0 1px 0 var(--rgba-white-10);
 transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
 position: relative;
 overflow: hidden;
}

.currency-icon-large::before {
 content: '';
 position: absolute;
 top: -50%;
 left: -50%;
 width: 200%;
 height: 200%;
 background: var(--gradient-icon-shimmer);
 transform: rotate(45deg);
 animation: iconShimmer 3s ease-in-out infinite;
}

.currency-icon-large:hover {
 transform: scale(1.05) rotateY(10deg);
 box-shadow:
 0 12px 48px var(--rgba-primary-25),
        0 8px 24px var(--rgba-primary-15),
        inset 0 1px 0 var(--rgba-white-20);
}

.currency-icon-large i {
 font-size: 2.5rem;
 color: var(--primary-500);
 animation: none;
 transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
 z-index: 2;
 position: relative;
 text-shadow: 0 2px 8px var(--rgba-primary-30);
}

.currency-icon-large:hover i {
 color: var(--primary-600);
 transform: scale(1.1);
 filter: drop-shadow(0 4px 12px var(--rgba-primary-40));
}



/* Modal title styles moved to modals.css to avoid duplication */

.amount-reminder {
 margin-top: 24px;
}

.reminder-box {
 background: var(--gradient-reminder-box);
 border: 1px solid var(--rgba-warning-20);
 border-radius: var(--radius-lg);
 padding: 20px;
 text-align: center;
 position: relative;
 overflow: hidden;
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
}

/* warningPulse moved to modals.css to avoid duplication */

.reminder-box::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: var(--gradient-reminder-line);
}

.copy-amount-section {
 display: flex; align-items: center; justify-content: center; gap: 12px;
 margin-top: 16px; padding: 16px; border-radius: var(--radius-md);
 background: var(--gradient-surface); border: 1px solid var(--rgba-gray-30);
 backdrop-filter: var(--backdrop-blur-light);
 box-shadow: var(--shadow-md), inset 0 1px 0 var(--rgba-white-10);
}

.amount-to-copy {
 font-family: 'Monaco', 'Consolas', monospace; font-size: 1.2rem; font-weight: 700;
 color: var(--gray-900); padding: 8px 16px; border-radius: var(--radius-sm); letter-spacing: -0.01em;
 background: var(--gradient-icon); border: 1px solid var(--rgba-primary-20);
}

/* Modal body styles moved to modals.css to avoid duplication */

/* QR section base styles moved to ui-components.css to avoid duplication */
/* Amount-selection specific nested styles */
.qr-section .amount-section, 
.qr-section .crypto-section {
 padding: 0;
}
 
.qr-section .amount-section h3, 
.qr-section .crypto-section h3 {
 font-size: clamp(1.1rem, 3.5vw, 1.3rem);
 margin-bottom: 16px;
 color: var(--text-primary);
 text-align: center;
 font-weight: 600;
 }
 
 /* Amount grid styles consolidated in core.css to avoid duplication */
 
 /* Core.css styles override - Maximum specificity for WordPress theme compatibility */
 .crypto-donation-container .carousel-container .amount-btn,
 .crypto-donation-container .amount-btn,
 [id*="crypto-donation"] .amount-btn,
 div.crypto-donation-container .amount-btn {
  padding: 20px 18px;
 background: var(--gradient-surface);
 border: 2px solid var(--border-light);
 border-radius: var(--radius-2xl);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 min-height: 120px; 
 font-weight: 700; 
 color: var(--gray-800);
 box-shadow: var(--shadow-card);
 width: 100%;
 position: relative;
 overflow: hidden;
 cursor: pointer;
 transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 /* Unified shine animation - consistent with other buttons */
 .crypto-donation-container .carousel-container .amount-btn::before,
 .crypto-donation-container .amount-btn::before,
 [id*="crypto-donation"] .amount-btn::before,
 div.crypto-donation-container .amount-btn::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: var(--gradient-btn-shine);
 transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 z-index: 1;
 pointer-events: none;
 }

 .crypto-donation-container .carousel-container .amount-btn:hover::before,
 .crypto-donation-container .amount-btn:hover::before,
 [id*="crypto-donation"] .amount-btn:hover::before,
 div.crypto-donation-container .amount-btn:hover::before {
 left: 100%;
 }

 /* Core.css hover states override - Maximum specificity */
 .crypto-donation-container .carousel-container .amount-btn:hover,
 .crypto-donation-container .amount-btn:hover,
 [id*="crypto-donation"] .amount-btn:hover,
 div.crypto-donation-container .amount-btn:hover {
 border-color: var(--primary-400);
 transform: translate3d(0, -6px, 0) scale(1.02);
 box-shadow: 0 20px 40px var(--rgba-primary-15), 0 8px 20px var(--rgba-primary-10);
 }

 /* Core.css selected states override - Maximum specificity */
 .crypto-donation-container .carousel-container .amount-btn.selected,
 .crypto-donation-container .amount-btn.selected,
 [id*="crypto-donation"] .amount-btn.selected,
 div.crypto-donation-container .amount-btn.selected {
 background: var(--gradient-success);
 border-color: var(--success-600);
 color: white;
 transform: translateY(-4px) scale(1.02);
 box-shadow: var(--shadow-success-glow);
 }
 
 .crypto-donation-container .carousel-container .amount-btn.selected .amount-value,
 .crypto-donation-container .amount-btn.selected .amount-value,
[id*="crypto-donation"] .amount-btn.selected .amount-value,
div.crypto-donation-container .amount-btn.selected .amount-value {
 color: white;
 text-shadow: 0 1px 2px var(--rgba-black-10);
}

/* Hover state for selected buttons - Maximum specificity */
.crypto-donation-container .carousel-container .amount-btn.selected:hover,
.crypto-donation-container .amount-btn.selected:hover,
[id*="crypto-donation"] .amount-btn.selected:hover,
div.crypto-donation-container .amount-btn.selected:hover {
 transform: translateY(-6px) scale(1.04);
 box-shadow: var(--shadow-success-glow);
}

/* Selected state shine animation - consistent with unified system */
.crypto-donation-container .carousel-container .amount-btn.selected:hover::before,
.crypto-donation-container .amount-btn.selected:hover::before,
[id*="crypto-donation"] .amount-btn.selected:hover::before,
div.crypto-donation-container .amount-btn.selected:hover::before {
 left: 100%;
}
 
 /* Core.css amount-value override - Maximum specificity */
 .crypto-donation-container .carousel-container .amount-value,
 .crypto-donation-container .amount-value,
 [id*="crypto-donation"] .amount-value,
 div.crypto-donation-container .amount-value {
 position: relative;
 color: var(--text-primary);
 box-shadow: none;
 transform: none;
 font-size: clamp(1.2rem, 4vw, 1.4rem);
 font-weight: 800;
 line-height: 1.1;
 margin-bottom: 6px;
 z-index: 3;
 word-break: break-word;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 100%;
 }

 .amount-btn > * {
 position: relative;
 z-index: 2;
 }
 
 /* Custom amount buttons now use the same styling as regular amount buttons for consistency */

/* ===============================================
   RESPONSIVE CUSTOM AMOUNT BUTTON ELEMENTS
   =============================================== */

/* Desktop: Show text and icon, hide mobile + symbol - Maximum specificity */
.crypto-donation-container .carousel-container .amount-btn.custom .desktop-text,
.crypto-donation-container .amount-btn.custom .desktop-text,
[id*="crypto-donation"] .amount-btn.custom .desktop-text,
div.crypto-donation-container .amount-btn.custom .desktop-text {
    display: inline;
}

.crypto-donation-container .carousel-container .amount-btn.custom .desktop-icon,
.crypto-donation-container .amount-btn.custom .desktop-icon,
[id*="crypto-donation"] .amount-btn.custom .desktop-icon,
div.crypto-donation-container .amount-btn.custom .desktop-icon {
    display: inline;
    margin-left: 8px;
    font-size: 0.9rem;
    opacity: 0.7;
}

.crypto-donation-container .carousel-container .amount-btn.custom .mobile-icon,
.crypto-donation-container .amount-btn.custom .mobile-icon,
[id*="crypto-donation"] .amount-btn.custom .mobile-icon,
div.crypto-donation-container .amount-btn.custom .mobile-icon {
    display: none;
}

/* Responsive styles moved to utilities.css for consolidation */




/* ========== frontend\price-updates.css ========== */
/* ===============================================
   PRICE UPDATES & DISPLAY
   Uses unified tokens from shared/tokens.css
   =============================================== */

/* tokens.css imported globally via main.css */

/* ===============================================
 PRICE UPDATE SYSTEM
 =============================================== */

.crypto-donation-container .price-update-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 24px 0;
    padding: 18px 24px;
    border-radius: var(--radius-md);
    background: var(--gradient-icon);
    border: 1px solid var(--rgba-primary-15);
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
    box-shadow: var(--shadow-button-primary);
    backdrop-filter: blur(8px);
    transition: var(--transition-normal);
}

.crypto-donation-container .price-update-info:hover {
    transform: translateY(-2px);
    border-color: var(--rgba-primary-25);
    box-shadow: var(--shadow-primary-hover);
}

.crypto-donation-container .refresh-prices-btn {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    min-height: 38px;
    white-space: nowrap;
    box-shadow: var(--shadow-button-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    outline: none;
    font-family: inherit;
    line-height: 1;
    transition: var(--transition-normal);
}

html body .crypto-donation-container .refresh-prices-btn:hover {
    background: var(--gradient-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-glow);
}

.crypto-donation-container .refresh-prices-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

#priceUpdateIcon.rotating {
    animation: rotateSmooth 1s linear infinite;
}

/* ========== frontend\action-buttons.css ========== */
/* ===============================================
   ACTION BUTTONS & COMPONENTS
   Uses unified tokens from shared/tokens.css
   =============================================== */

/* tokens.css imported globally via main.css */
/* ===============================================
 PROGRESS BAR CENTERING (Desktop Only)
 =============================================== */

/* Desktop-only: Enhanced positioning for inline progress bar */
@media (min-width: 769px) {
 /* When slide-actions has only one button (step 1), center everything */
 .slide-actions:has(.next-btn:only-child) {
 justify-content: center;
 gap: 30px;
 }
 
 .slide-actions:has(.next-btn:only-child) .inline-progress-bar {
 position: static;
 transform: none;
 margin: 0;
 }

 /* When slide-actions has both buttons, use space-between with centered progress bar */
 .slide-actions:has(.prev-btn):has(.next-btn),
 .slide-actions:has(.prev-btn):has(.proceed-btn) {
 justify-content: space-between;
 }
 
 .slide-actions:has(.prev-btn):has(.next-btn) .inline-progress-bar,
 .slide-actions:has(.prev-btn):has(.proceed-btn) .inline-progress-bar {
 position: absolute;
 left: 50%;
 transform: translate3d(-50%, 0, 0);
 margin: 0;
 }
}


/* ===============================================
 DONATION CONFIRMATION CARD - OPTIMIZED
 =============================================== */

.donation-confirmation-card {
 background: var(--gradient-surface); border: 2px solid var(--rgba-gray-30);
 border-radius: var(--radius-2xl); padding: 0; margin: 0; overflow: hidden; position: relative;
 box-shadow: var(--shadow-lg); animation: confirmationCardSlideUp 0.7s ease-out forwards;
}

.donation-confirmation-card::before {
 content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
 background: var(--gradient-donation-card-border);
 opacity: 0.7;
}


/* ===============================================
 SUMMARY SECTION
 =============================================== */

.summary-section {
 position: relative;
}

.summary-section .section-header {
 background: var(--gradient-primary-light);
 padding: 20px 24px 16px;
 border-bottom: 1px solid var(--rgba-gray-30);
}

.summary-section .section-header h4 {
 margin: 0; font-size: 18px; font-weight: 700; color: var(--color-neutral-700);
 display: flex; align-items: center; gap: 12px;
}

.summary-section .section-header h4 i {
 color: var(--color-primary); font-size: 20px;
}

.summary-content {
 padding: 20px 24px;
 background: var(--rgba-white-80);
}

.summary-row {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 12px 0;
 border-bottom: 1px solid var(--rgba-gray-30);
 font-size: 15px;
}

.summary-row:last-child {
 border-bottom: none;
 font-weight: 600;
 font-size: 16px;
 padding-top: 16px;
 margin-top: 8px;
 border-top: 2px solid var(--rgba-primary-10);
 background: var(--gradient-summary-total);
 margin: 8px -24px 0;
 padding: 16px 24px 12px;
}

.summary-row .label {
 color: var(--color-neutral-500); font-weight: 500;
}

.summary-row .value {
 color: var(--color-neutral-700); font-weight: 600; text-align: right;
}

.summary-row:last-child .value {
 color: var(--color-primary); font-size: 18px;
}

.summary-note {
 display: flex; align-items: center; gap: 8px; margin: 0; padding: 16px 24px;
 background: var(--gradient-warning-light);
 border-top: 1px solid var(--rgba-warning-20);
 font-size: 13px; color: var(--color-warning-800); font-weight: 500;
}

.summary-note i {
 color: var(--color-warning); font-size: 14px;
}


/* ===============================================
 SECURITY SECTION - OPTIMIZED
 =============================================== */

.security-section {
 border-top: 1px solid var(--rgba-gray-30); position: relative;
}

.security-section .section-header {
 padding: 24px 24px 16px; display: flex; justify-content: space-between;
 align-items: center; flex-wrap: wrap; gap: 16px;
}

.security-section .section-header h4 {
 margin: 0; font-size: 16px; font-weight: 600; color: var(--gray-600);
 display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em;
}

.security-section .section-header h4 i {
 color: var(--success-600); font-size: 16px; opacity: 0.8;
}

.trust-badge-inline {
 display: flex; align-items: center; gap: 6px; padding: 6px 12px;
 background: var(--rgba-green-129-08); color: var(--success-600);
 border-radius: var(--radius-full); font-size: 12px; font-weight: 500;
 border: 1px solid var(--rgba-green-129-15); white-space: nowrap;
 transition: var(--transition-fast);
}

.trust-badge-inline:hover {
 background: var(--rgba-green-129-12); border-color: var(--rgba-green-129-25);
}

.trust-badge-inline i { color: var(--warning-500); font-size: 12px; }

.security-grid {
 display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Keep specific value for action buttons */
 gap: 12px; padding: 20px 24px; background: transparent;
}

.security-item {
 display: flex; align-items: center; gap: 12px; padding: 16px; position: relative;
 background: var(--rgba-white-60); border-radius: var(--radius-md);
 border: 1px solid var(--rgba-gray-30); overflow: hidden;
 transition: var(--transition-normal);
}

.security-item::before {
 content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%;
 background: var(--success-500); opacity: 0; transition: var(--transition-normal);
}

.security-item:hover {
 background: var(--rgba-white-85); transform: translateY(-1px);
 box-shadow: var(--shadow-success-light); border-color: var(--rgba-green-129-20);
}

.security-item:hover::before {
 opacity: 1;
}

.security-icon {
 width: 32px;
 height: 32px;
 border-radius: var(--radius-sm);
 background: var(--rgba-green-129-10);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--success-600);
 font-size: 14px;
 flex-shrink: 0;
 border: 1px solid var(--rgba-green-129-15);
 transition: all 0.25s ease;
}

.security-item:hover .security-icon {
 background: var(--rgba-green-129-15);
  border-color: var(--rgba-green-129-25);
 transform: scale(1.05);
}

.security-info {
 flex: 1;
 display: flex;
 flex-direction: column;
 gap: 2px;
}

.security-title {
 font-weight: 600;
 font-size: 13px;
 color: var(--gray-700);
 line-height: 1.3;
 letter-spacing: -0.01em;
}

.security-desc {
 font-size: 11px;
 color: var(--gray-500);
 line-height: 1.3;
 font-weight: 400;
}

.security-status {
 width: 20px;
 height: 20px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 10px;
 flex-shrink: 0;
 transition: all 0.25s ease;
}

.security-status.verified {
 background: var(--rgba-green-129-10);
 color: var(--success-600);
 border: 1px solid var(--rgba-green-129-20);
}

.security-item:hover .security-status.verified {
 background: var(--rgba-green-129-15);
  border-color: var(--rgba-green-129-30);
 transform: scale(1.1);
}

.security-features {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 24px;
 padding: 16px 24px 20px;
 background: var(--rgba-slate-60);
    border-top: 1px solid var(--rgba-gray-30);
 margin-top: 8px;
}

.feature-item {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: 11px;
 color: var(--gray-500);
 font-weight: 500;
 transition: color 0.2s ease;
}

.feature-item:hover {
 color: var(--gray-700);
}

.feature-item i {
 color: var(--success-500);
 font-size: 12px;
 opacity: 0.7;
}

.feature-item.trust-highlight {
 background: var(--rgba-warning-158-05);
 padding: 8px 12px;
 border-radius: 8px;
 border: 1px solid var(--rgba-warning-191-20);
 font-weight: 600;
}

.feature-item.trust-highlight i {
 color: var(--warning-500);
 opacity: 1;
}

.feature-item.trust-highlight:hover {
 background: var(--rgba-warning-158-12);
 border-color: var(--rgba-warning-158-25);
}

/* Responsive adjustments for unified donation confirmation card */
@media (max-width: 1024px) {
 .security-grid {
 grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-md), 1fr));
 gap: 12px;
 padding: 20px;
 }
 
 .security-section .section-header {
 flex-direction: column;
 align-items: flex-start;
 gap: 16px;
 }
 
 .trust-badge-inline {
 align-self: stretch;
 justify-content: center;
 }
}

@media (max-width: 768px) {
 .donation-confirmation-card {
 border-radius: var(--radius-lg);
 }
 
 .summary-section .section-header,
 .security-section .section-header {
 padding: 16px 20px 12px;
 }
 
 .summary-section .section-header h4,
 .security-section .section-header h4 {
 font-size: 16px;
 }
 
 .summary-content {
 padding: 16px 20px;
 }
 
 .summary-row {
 padding: 10px 0;
 font-size: 14px;
 }
 
 .summary-row:last-child {
 padding: 12px 20px 10px;
 margin: 6px -20px 0;
 }
 
 .summary-note {
 padding: 12px 20px;
 font-size: 12px;
 }
 
 .security-section .section-header {
 flex-direction: column;
 align-items: stretch;
 gap: 12px;
 }
 
 .security-section .section-header h4 {
 justify-content: center;
 }
 
 .trust-badge-inline {
 justify-content: center;
 padding: 10px 16px;
 font-size: 12px;
 }
 
 .security-grid {
 grid-template-columns: 1fr;
 gap: 10px;
 padding: 16px 20px;
 }
 
 .security-item {
 padding: 12px 16px;
 gap: 12px;
 border-radius: var(--radius-md);
 }
 
 .security-item:hover {
 transform: translate3d(0, -1px, 0) scale(1.01);
 }
 
 .security-icon {
 width: 32px;
 height: 32px;
 font-size: 14px;
 border-radius: var(--radius-sm);
 }
 
 .security-title {
 font-size: 14px;
 }
 
 .security-desc {
 font-size: 12px;
 }
 
 .security-status {
 width: 20px;
 height: 20px;
 font-size: 10px;
 }
 
 .security-features {
 padding: 16px 20px;
 flex-direction: row;
 flex-wrap: wrap;
 gap: 12px;
 justify-content: center;
 }
 
 .feature-item {
 justify-content: center;
 font-size: 11px;
 }
}

@media (max-width: 480px) {
 .donation-confirmation-card {
 border-radius: 12px;
 }
 
 .summary-section .section-header,
 .security-section .section-header {
 padding: 12px 16px 10px;
 }
 
 .summary-section .section-header h4,
 .security-section .section-header h4 {
 font-size: 15px;
 gap: 8px;
 }
 
 .summary-content {
 padding: 12px 16px;
 }
 
 .summary-row {
 padding: 8px 0;
 font-size: 13px;
 }
 
 .summary-row:last-child {
 padding: 10px 16px 8px;
 margin: 4px -16px 0;
 font-size: 15px;
 }
 
 .summary-row:last-child .value {
 font-size: 16px;
 }
 
 .summary-note {
 padding: 10px 16px;
 font-size: 11px;
 }
 
 .trust-badge-inline {
 padding: 8px 12px;
 font-size: 11px;
 border-radius: var(--radius-xl);
 }
 
 /* Mobile Security Section - Icon-Only Single Row */
 .security-grid {
 display: flex;
 justify-content: space-evenly;
 align-items: center;
 padding: 12px 8px;
 gap: 8px;
 background: var(--rgba-slate-60);
 border-radius: var(--radius-md);
 margin: 0 4px;
 overflow-x: auto;
 overflow-y: visible;
 min-height: 70px;
 }
 
 .security-item {
 padding: 8px 6px;
 gap: 0;
 border-radius: var(--radius-sm);
 flex-direction: column;
 min-width: 50px;
 max-width: 70px;
 text-align: center;
 flex: 0 0 auto;
 background: var(--rgba-white-90);
  border: 1px solid var(--rgba-green-129-15);
 box-sizing: border-box;
 }
 
 .security-item:hover {
 transform: translate3d(0, -1px, 0) scale(1.02);
 box-shadow: 0 6px 16px var(--rgba-green-129-20);
 }
 
 /* Hide text content on mobile */
 .security-info {
 display: none;
 }
 
 /* Enhanced mobile security icons */
 .security-icon {
 width: 32px;
 height: 32px;
 font-size: 14px;
 border-radius: var(--radius-sm);
 background: var(--rgba-green-129-15);
  border: 2px solid var(--rgba-green-129-25);
 margin: 0 auto;
 }
 
 .security-item:hover .security-icon {
 background: var(--rgba-green-129-25);
  border-color: var(--rgba-green-129-40);
 transform: scale(1.05);
 }
 
 /* Hide status indicators on mobile */
 .security-status {
 display: none;
 }
 
 /* Compact mobile security features */
 .security-features {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 padding: 8px 12px;
 gap: 6px;
 background: var(--rgba-slate-40);
 }
 
 .feature-item {
 font-size: 8px;
 gap: 3px;
 padding: 3px 6px;
 background: var(--rgba-green-129-08);
 border-radius: 8px;
 border: 1px solid var(--rgba-green-129-15);
 white-space: nowrap;
 }
 
 .feature-item i {
 font-size: 9px;
 }
 
 /* Add tooltips for mobile icons */
 .security-item {
 position: relative;
 }
 
 .security-item::after {
 content: attr(data-title);
 position: absolute;
 top: -32px;
 left: 50%;
 transform: translateX(-50%);
 background: var(--rgba-black-85);
 color: white;
 padding: 3px 6px;
 border-radius: 4px;
 font-size: 9px;
 white-space: nowrap;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.3s ease;
 z-index: 1000;
 }
 
 .security-item:hover::after {
 opacity: 1;
 }
}

/* Enhanced animations for unified confirmation card */
@keyframes confirmationCardSlideUp {
 0% {
 opacity: 0;
 transform: translate3d(0, 30px, 0) scale(0.95);
 }
 100% {
 opacity: 1;
 transform: translate3d(0, 0, 0) scale(1);
 }
}

@keyframes securityPulse {
 0%, 100% { 
 transform: scale(1);
 box-shadow: 0 4px 12px var(--rgba-green-129-30);
 }
 50% { 
 transform: scale(1.05);
 box-shadow: 0 6px 20px var(--rgba-green-129-40);
 }
}

@keyframes trustBadgePulse {
 0%, 100% { 
 transform: scale(1);
 box-shadow: 0 4px 12px var(--rgba-success-25);
 }
 50% { 
 transform: scale(1.02);
 box-shadow: 0 6px 20px var(--rgba-success-30);
 }
}

@keyframes securityItemSlideIn {
 0% {
 opacity: 0;
 transform: translate3d(0, 20px, 0) scale(0.9);
 }
 100% {
 opacity: 1;
 transform: translateY(0) scale(1);
 }
}

@keyframes featureItemFadeIn {
 0% {
 opacity: 0;
 transform: translateX(-10px);
 }
 100% {
 opacity: 1;
 transform: translateX(0);
 }
}

/* Apply animations to unified card */
.security-item-animate {
 animation: securityItemSlideIn 0.6s ease-out forwards;
 opacity: 0;
}

.feature-item-animate {
 animation: featureItemFadeIn 0.5s ease-out forwards;
 opacity: 0;
}

.security-status.verified {
 animation: securityPulse 3s ease-in-out infinite;
}

.trust-badge-inline {
 animation: trustBadgePulse 4s ease-in-out infinite;
 transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Mobile touch feedback */
@media (max-width: 768px) {
 .security-item:active {
 transform: translateY(-1px) scale(1.01);
 transition: all 0.1s ease;
 }
 
 .trust-badge-inline:active {
 transform: scale(0.98);
 }
}



/* ===============================================
 ACTION SECTION & BUTTONS - OPTIMIZED
=============================================== */

/* Removed unused .action-section styles - not referenced in codebase */

/* Duplicate proceed-btn styles removed - using slide-actions specific styles below */

/* Base slide-actions button styles - High Specificity */
.crypto-donation-container .carousel-container .slide-actions .prev-btn,
.crypto-donation-container .carousel-container .slide-actions .next-btn,
.crypto-donation-container .carousel-container .slide-actions .proceed-btn,
.crypto-donation-container .slide-actions .prev-btn,
.crypto-donation-container .slide-actions .next-btn,
.crypto-donation-container .slide-actions .proceed-btn {
    padding: 16px 32px;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.01em;
    text-decoration: none;
    outline: none;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Slide-actions specific proceed-btn styles - High Specificity */
.crypto-donation-container .carousel-container .slide-actions .next-btn,
.crypto-donation-container .carousel-container .slide-actions .proceed-btn,
.crypto-donation-container .slide-actions .next-btn,
.crypto-donation-container .slide-actions .proceed-btn {
    background: var(--gradient-success);
    color: white;
    border-color: var(--rgba-white-20);
    box-shadow: 0 6px 20px var(--rgba-green-129-30), 0 3px 10px var(--rgba-green-129-20);
    font-weight: 700;
}

.crypto-donation-container .carousel-container .slide-actions .next-btn:hover,
.crypto-donation-container .carousel-container .slide-actions .proceed-btn:hover,
.crypto-donation-container .slide-actions .next-btn:hover,
.crypto-donation-container .slide-actions .proceed-btn:hover {
    background: var(--gradient-success-dark);
    transform: translate3d(0, -3px, 0) scale(1.03);
    box-shadow: 0 12px 35px var(--rgba-green-129-40), 0 6px 20px var(--rgba-green-129-30);
    border-color: var(--rgba-white-30);
}

.crypto-donation-container .carousel-container .slide-actions .next-btn:disabled,
.crypto-donation-container .carousel-container .slide-actions .proceed-btn:disabled,
.crypto-donation-container .slide-actions .next-btn:disabled,
.crypto-donation-container .slide-actions .proceed-btn:disabled {
    background: var(--gradient-btn-disabled-action);
    color: var(--color-gray-175);
    border-color: transparent;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px var(--rgba-black-04), 0 1px 3px var(--rgba-black-02);
}

/* Enhanced button shine animations - High Specificity */
.crypto-donation-container .carousel-container .slide-actions .prev-btn::before,
.crypto-donation-container .carousel-container .slide-actions .next-btn::before,
.crypto-donation-container .carousel-container .slide-actions .proceed-btn::before,
.crypto-donation-container .slide-actions .prev-btn::before,
.crypto-donation-container .slide-actions .next-btn::before,
.crypto-donation-container .slide-actions .proceed-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-btn-shine);
    transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    pointer-events: none;
}

.crypto-donation-container .carousel-container .slide-actions .prev-btn:hover::before,
.crypto-donation-container .carousel-container .slide-actions .next-btn:hover::before,
.crypto-donation-container .carousel-container .slide-actions .proceed-btn:hover::before,
.crypto-donation-container .slide-actions .prev-btn:hover::before,
.crypto-donation-container .slide-actions .next-btn:hover::before,
.crypto-donation-container .slide-actions .proceed-btn:hover::before {
    left: 100%;
}

/* Icon animations - Maximum Specificity */
html body .crypto-donation-container .carousel-container .slide-actions .next-btn i,
html body .crypto-donation-container .carousel-container .slide-actions .proceed-btn i,
html body .crypto-donation-container .slide-actions .next-btn i,
html body .crypto-donation-container .slide-actions .proceed-btn i {
    transition: transform 0.3s ease;
}

html body .crypto-donation-container .carousel-container .slide-actions .next-btn:hover i,
html body .crypto-donation-container .carousel-container .slide-actions .proceed-btn:hover i,
html body .crypto-donation-container .slide-actions .next-btn:hover i,
html body .crypto-donation-container .slide-actions .proceed-btn:hover i {
    transform: translateX(2px);
}

/* Slide-actions prev-btn styles - High Specificity */
.crypto-donation-container .carousel-container .slide-actions .prev-btn,
.crypto-donation-container .slide-actions .prev-btn {
    background: var(--gradient-prev-btn-action);
    color: var(--text-secondary);
    border-color: var(--rgba-gray-184-20);
    box-shadow: 0 4px 12px var(--rgba-black-04), 0 2px 6px var(--rgba-black-02);
}

.crypto-donation-container .carousel-container .slide-actions .prev-btn:hover,
.crypto-donation-container .slide-actions .prev-btn:hover {
    background: var(--gradient-prev-btn-hover-action);
    transform: translate3d(0, -2px, 0) scale(1.02);
    box-shadow: 0 8px 25px var(--rgba-black-08), 0 4px 12px var(--rgba-black-04);
    border-color: var(--rgba-gray-184-30);
}

html body .crypto-donation-container .carousel-container .slide-actions .prev-btn i,
html body .crypto-donation-container .slide-actions .prev-btn i {
    transition: transform 0.3s ease;
}

html body .crypto-donation-container .carousel-container .slide-actions .prev-btn:hover i,
html body .crypto-donation-container .slide-actions .prev-btn:hover i {
    transform: translateX(-2px);
}




/* ========== frontend\modals.css ========== */
/* ===============================================
   MODAL SYSTEM
   Uses unified tokens from shared/tokens.css
   =============================================== */

/* tokens.css imported globally via main.css */

/* ===========================================
 8. MODAL SYSTEM
 =========================================== */

/* Modal Overlay - High Specificity Protection */
body .modal-overlay,
html body .modal-overlay,
.modal-overlay.modal-overlay,
.modal-overlay {
 position: fixed;
 inset: 0;
 background: var(--modal-overlay-bg);
 display: none;
 justify-content: center;
 align-items: center;
 z-index: var(--z-modal-backdrop);
 backdrop-filter: blur(24px) saturate(180%);
 overscroll-behavior: contain;
 overflow: hidden;
 -webkit-overflow-scrolling: touch;
 animation: modalOverlayFadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
 --wp--style--global--content-size: none;
 --wp--style--global--wide-size: none;
}

/* Ensure modal overlay is never constrained by WordPress */
body .modal-overlay,
html body .modal-overlay,
.is-layout-constrained .modal-overlay {
 max-width: 100vw;
 width: 100vw;
 margin: 0;
 --wp--style--global--content-size: none;
 --wp--style--global--wide-size: none;
}

.modal-overlay::before {
 content: '';
 position: absolute;
 inset: 0;
 background: var(--gradient-modal-overlay-glow);
 opacity: 0;
 animation: pulseGlow 3s ease-in-out infinite;
 z-index: 0;
 pointer-events: none;
}

.modal-overlay.show {
 display: flex;
}

/* Modal Content - High Specificity Protection */
body .modal-overlay .modal-content,
html body .modal-overlay .modal-content,
.modal-overlay.modal-overlay .modal-content,
.modal-overlay .modal-content.modal-content,
.modal-content {
 background: var(--modal-content-bg);
 border: 1px solid var(--modal-content-border);
 border-radius: var(--modal-header-radius);
 max-width: var(--modal-max-width);
 width: var(--modal-width);
 max-height: var(--modal-max-height);
 overflow-y: auto;
 overflow-x: hidden;
 position: relative;
 margin: 0 auto;
 animation: modalSlideIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
 box-shadow: var(--shadow-xl), 0 0 0 1px var(--rgba-white-05), inset 0 1px 0 var(--rgba-white-10);
 backdrop-filter: var(--backdrop-blur-medium);
 pointer-events: auto;
 touch-action: manipulation;
 transform-style: preserve-3d;
 flex-shrink: 0;
 scrollbar-width: thin;
 scrollbar-color: var(--rgba-primary-30) transparent;
}

/* Modal Content Scrollbar Styles */
.modal-content::-webkit-scrollbar {
 width: 6px;
}

.modal-content::-webkit-scrollbar-track {
 background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
 background: var(--gradient-modal-scrollbar);
 border-radius: var(--radius-xs);
 transition: background 0.3s ease;
}

.modal-content::-webkit-scrollbar-thumb:hover {
 background: var(--gradient-modal-scrollbar-hover);
}

/* Specific override for frontend crypto modal */
.modal-content.frontend-crypto-modal {
 /* Reset any inherited positioning */
 position: relative;
 top: auto;
 left: auto;
 right: auto;
 bottom: auto;
 transform: none;
 /* Ensure proper width behavior */
 width: 92%;
 max-width: 520px;
 margin: 0;
}

/* WordPress layout constraint override for modal content */
.modal-overlay .modal-content:not(.alignleft):not(.alignright):not(.alignfull),
body .modal-overlay .modal-content:not(.alignleft):not(.alignright):not(.alignfull) {
 max-width: 520px;
 width: 92%;
 margin: 0 auto;
 margin-block-start: 0;
 margin-block-end: 0;
 /* Reset WordPress content size constraints */
 --wp--style--global--content-size: initial;
}

.modal-content::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: var(--gradient-modal-content-top);
 z-index: 1;
 pointer-events: none;
}

/* Modal Header - High Specificity Protection */
body .modal-overlay .modal-header,
html body .modal-overlay .modal-header,
.modal-overlay.modal-overlay .modal-header,
.modal-overlay .modal-header.modal-header,
.modal-header {
 padding: 1.2em 2em 1.1em;
 text-align: center;
 position: relative;
 z-index: 2;
 background: var(--modal-header-bg);
 color: var(--text-primary);
 border-radius: var(--modal-header-radius) var(--modal-header-radius) 0 0;
 border-bottom: 1px solid var(--modal-header-border);
 backdrop-filter: var(--backdrop-blur-medium);
}

.modal-header::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: var(--gradient-modal-header-top);
 border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.modal-header .header-content {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.3em;
}

.donation-summary-inline {
 display: flex;
 align-items: center;
 gap: var(--ui-gap-md);
 justify-content: center;
 flex-wrap: wrap;
}

/* Network Fee Display */
.network-fee-summary {
 display: none;
 color: var(--text-secondary);
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-medium);
 opacity: 0.8;
 margin-left: var(--ui-gap-sm);
}

.network-fee-summary.show {
 display: inline-block;
}

/* Modal Close Button - High Specificity Protection */
body .modal-overlay .modal-close,
html body .modal-overlay .modal-close,
.modal-overlay.modal-overlay .modal-close,
.modal-overlay .modal-close.modal-close,
.modal-close {
 position: absolute;
 top: var(--modal-padding-sm);
 right: var(--modal-padding-sm);
 background: var(--modal-close-bg);
 border: 1px solid var(--modal-close-border);
 color: var(--modal-close-text);
 font-size: var(--modal-icon-size);
 cursor: pointer;
 width: var(--modal-close-size);
 height: var(--modal-close-size);
 border-radius: var(--modal-close-radius);
 display: flex;
 align-items: center;
 justify-content: center;
 transition: var(--transition-smooth);
 font-weight: 500;
 backdrop-filter: var(--blur-md) saturate(180%);
 box-shadow: var(--ui-input-shadow);
 z-index: var(--modal-z-close);
}

.modal-close:hover {
 background: var(--modal-close-hover-bg);
 color: var(--modal-close-hover-text);
 border-color: var(--modal-close-hover-border);
 transform: scale(1.05);
 box-shadow: 0 4px 12px var(--rgba-error-20), 0 2px 6px var(--rgba-error-10);
}

.modal-close:active {
 transform: scale(0.96) translateY(0);
 transition-duration: 0.15s;
 box-shadow:
  0 4px 16px var(--rgba-error-68-30),
  inset 0 2px 8px var(--rgba-black-15);
}

/* Hover animation for the X icon with High Specificity */
.modal-close i {
 transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
 position: relative;
 z-index: 2;
}

.modal-close:hover i {
 transform: scale(1.1);
 text-shadow: 0 2px 4px var(--rgba-black-10);
}

.modal-title {
 font-size: var(--modal-title-size);
 font-weight: var(--modal-title-weight);
 margin-bottom: 0.2em;
 margin-top: 0;
 color: var(--gray-900);
 letter-spacing: var(--modal-title-spacing);
 line-height: 1.4;
 background: var(--gradient-modal-title);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 text-shadow: none;
 position: relative;
 padding-bottom: 0.05em;
}

.modal-overlay .modal-title::after,
.crypto-donation-modal .modal-title::after,
.modal-title::after {
 content: '';
 position: absolute;
 bottom: -8px;
 left: 50%;
 transform: translateX(-50%);
 width: 60px;
 height: 2px;
 background: var(--modal-title-underline);
 border-radius: 1px;
}

/* Mobile responsiveness for modal header and title */
@media (max-width: 768px) {
 /* Simplified animations for mobile performance */
 .modal-content {
  animation: modalSlideInMobile 0.3s ease-out;
 }
 
 .modal-overlay {
  animation-duration: 0.25s;
 }
 
 .modal-header {
  padding: 1em 1.5em 0.9em;
 }
 
 .header-content {
  gap: 0.25em;
 }
 
 .modal-overlay .currency-icon-large,
 .crypto-donation-modal .currency-icon-large,
 .currency-icon-large {
  width: 70px;
  height: 70px;
  margin: 0 auto 0.3em;
 }
 
 .modal-overlay .currency-icon-large i,
 .crypto-donation-modal .currency-icon-large i,
 .currency-icon-large i {
  font-size: 2.2rem;
 }
 
 .modal-title {
  font-size: clamp(1.75rem, 6vw, 2.4rem);
  margin-bottom: 0.15em;
  margin-top: 0;
  line-height: 1.4;
  padding-bottom: 0.05em;
 }
}

@media (max-width: 480px) {
 /* Ultra-simplified animations for small mobile devices */
 .modal-content {
  animation: modalSlideInMobile 0.2s ease-out;
 }
 
 .modal-overlay {
  animation-duration: 0.2s;
 }
 
 /* Disable complex animations on very small screens */
 .modal-overlay::before {
  animation: none;
 }
 
 .modal-header {
  padding: 0.9em 1.25em;
 }
 
 .header-content {
  gap: 0.2em;
 }
 
 .modal-overlay .currency-icon-large,
 .crypto-donation-modal .currency-icon-large,
 .currency-icon-large {
  width: 60px;
  height: 60px;
  margin: 0 auto 0.25em;
 }
 
 .modal-overlay .currency-icon-large i,
 .crypto-donation-modal .currency-icon-large i,
 .currency-icon-large i {
  font-size: 2rem;
 }
 
 .modal-title {
  font-size: clamp(1.5rem, 7vw, 2rem);
  margin-bottom: 0.1em;
  margin-top: 0;
  line-height: 1.5;
  padding-bottom: 0.08em;
 }
}

.modal-overlay .amount-reminder,
.crypto-donation-modal .amount-reminder,
.amount-reminder {
 margin-top: 24px;
}

.modal-overlay .reminder-box,
.crypto-donation-modal .reminder-box,
.reminder-box {
 background: var(--gradient-warning-light);
 border: 1px solid var(--rgba-warning-191-20);
 border-radius: var(--modal-button-radius);
 padding: var(--modal-padding-md);
 text-align: center;
 position: relative;
 overflow: hidden;
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
}

@keyframes warningPulse {
 0%, 100% { transform: scale(1); }
 50% { transform: scale(1.1); }
}

.modal-overlay .reminder-box::after,
.crypto-donation-modal .reminder-box::after,
.reminder-box::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: var(--reminder-line);
}

.modal-overlay .copy-amount-section,
.crypto-donation-modal .copy-amount-section,
.copy-amount-section {
 display: flex; align-items: center; justify-content: center; gap: var(--modal-gap-md);
 margin-top: 16px; padding: 16px; border-radius: var(--radius-md);
 background: var(--gradient-surface); border: 1px solid var(--rgba-gray-30);
 backdrop-filter: var(--backdrop-blur-light);
 box-shadow: var(--shadow-md), inset 0 1px 0 var(--rgba-white-10);
}

.modal-overlay .amount-to-copy,
.crypto-donation-modal .amount-to-copy,
.amount-to-copy {
 font-family: 'Monaco', 'Consolas', monospace; font-size: 1.2rem; font-weight: 700;
 color: var(--text-primary); padding: 8px 16px; border-radius: 8px; letter-spacing: -0.01em;
 background: var(--gradient-icon); border: 1px solid var(--rgba-primary-20);
}

/* Copy Amount Button - High Specificity Protection */
body .modal-overlay .copy-amount-btn,
html body .modal-overlay .copy-amount-btn,
.modal-overlay.modal-overlay .copy-amount-btn,
.crypto-donation-modal .copy-amount-btn,
.modal-overlay .copy-amount-btn,
.copy-amount-btn {
 background: var(--gradient-success); color: white; border: none;
 padding: 12px 20px; border-radius: 10px; cursor: pointer;
 font-size: 0.95rem; font-weight: 600; min-width: 120px;
 box-shadow: var(--shadow-button-success); display: flex;
 align-items: center; justify-content: center; gap: var(--modal-gap-sm);
 transition: var(--transition-smooth);
}

.crypto-donation-modal .copy-amount-btn:hover,
.modal-overlay .copy-amount-btn:hover,
.copy-amount-btn:hover {
 background: var(--gradient-success);
 transform: translateY(-2px);
 box-shadow: var(--shadow-success-glow);
}

.crypto-donation-modal .copy-amount-btn:active,
.modal-overlay .copy-amount-btn:active,
.copy-amount-btn:active {
 transform: translateY(0) scale(0.98); transition-duration: 0.1s;
}

/* Modal Body - High Specificity Protection */
body .modal-overlay .modal-body,
html body .modal-overlay .modal-body,
.modal-overlay.modal-overlay .modal-body,
.modal-overlay .modal-body.modal-body,
.modal-body {
 padding: var(--modal-padding-lg);
 position: relative;
 z-index: var(--modal-z-content);
 overflow: hidden;
 box-sizing: border-box;
 background: var(--modal-body-bg);
 backdrop-filter: var(--backdrop-blur-medium);
}

/* QR Section - High Specificity Protection */
body .modal-overlay .qr-section,
html body .modal-overlay .qr-section,
.modal-overlay.modal-overlay .qr-section,
.modal-overlay .qr-section.qr-section,
.qr-section {
 text-align: center;
 margin-bottom: var(--ui-gap-xl);
 position: relative;
}

/* QR Code - High Specificity Protection */
body .modal-overlay .qr-code,
html body .modal-overlay .qr-code,
.modal-overlay.modal-overlay .qr-code,
.modal-overlay .qr-code.qr-code,
.qr-code {
 width: 240px;
 height: 240px;
 border: 3px solid transparent;
 background: var(--gradient-qr-border);
 border-radius: var(--ui-radius-xl);
 margin: 0 auto 20px;
 padding: var(--ui-gap-md);
 box-shadow: 0 16px 48px var(--rgba-primary-15),0 8px 24px var(--rgba-primary-10),inset 0 1px 0 var(--rgba-white-10);
 transition: all 0.4s cubic-bezier(0.165,0.84,0.44,1);
 position: relative;
 overflow: hidden;
}

/* Modal-specific QR enhancements */
.modal-content .qr-code {
 max-width: 100%; box-sizing: border-box; flex-shrink: 0;
}

.qr-code::before {
 content: '';
 position: absolute;
 top: -2px;
 left: -2px;
 right: -2px;
 bottom: -2px;
 background: var(--gradient-rainbow);
 border-radius: 20px;
 z-index: 0;
 animation: qrBorderGlow 3s ease-in-out infinite;
 pointer-events: none;
}

@keyframes qrBorderGlow {
 0%, 100% { opacity: 0.5; }
 50% { opacity: 1; }
}

.modal-overlay .qr-code:hover,
.crypto-donation-modal .qr-code:hover,
.qr-code:hover {
 transform: scale(1.02) rotateY(5deg);
 box-shadow: var(--shadow-primary-xl), inset 0 1px 0 var(--rgba-white-20);
}

.modal-overlay .scan-instruction,
.crypto-donation-modal .scan-instruction,
.scan-instruction {
 color: var(--color-neutral-500); font-size: 1.1rem; font-weight: 500;
 line-height: 1.5; margin-top: 12px; background: var(--gradient-primary-light);
 padding: 16px 20px; border-radius: 12px;
 border: 1px solid var(--rgba-primary-10);
 backdrop-filter: blur(8px);
}

/* Address Section Styles */
.modal-overlay .address-section,
.crypto-donation-modal .address-section,
.address-section {
 margin-bottom: var(--ui-gap-xl);
}

.modal-overlay .address-section label,
.crypto-donation-modal .address-section label,
.address-section label {
 display: block;
 font-weight: 700;
 margin-bottom: var(--ui-gap-md);
 color: var(--text-primary);
 font-size: 1.1rem;
 letter-spacing: -0.01em;
 position: relative;
 padding-left: var(--ui-gap-xl);
}

.modal-overlay .address-section label::before,
.crypto-donation-modal .address-section label::before,
.address-section label::before {
 content: '🔗';
 position: absolute;
 left: 0;
 top: 0;
 font-size: 1.2em;
}

.modal-overlay .address-container,
.crypto-donation-modal .address-container,
.address-container {
 display: flex;
 flex-direction: column;
 gap: var(--ui-gap-md);
}

.modal-overlay .wallet-address,
.crypto-donation-modal .wallet-address,
.wallet-address {
 width: 100%;
 padding: 20px;
 border: 2px solid var(--primary-200);
 border-radius: var(--ui-radius-md);
 font-family: 'Monaco','Consolas',monospace;
 font-size: 0.95rem;
 font-weight: 500;
 background: var(--gradient-wallet-address-modal);
 color: var(--text-primary);
 word-break: break-all;
 line-height: 1.5;
 transition: var(--transition-smooth);
 backdrop-filter: var(--blur-sm);
 box-shadow: 0 4px 16px var(--primary-50), inset 0 1px 0 var(--surface-highlight);
 position: relative;
 overflow: hidden;
}

.modal-overlay .wallet-address:hover,
.crypto-donation-modal .wallet-address:hover,
.wallet-address:hover {
 border-color: var(--primary-400);
 transform: translateY(-2px);
 box-shadow: 0 8px 24px var(--primary-100), 0 4px 12px var(--primary-50), inset 0 1px 0 var(--surface-highlight);
}

/* Wallet Section - High Specificity Protection */
body .modal-overlay .wallet-section,
html body .modal-overlay .wallet-section,
.modal-overlay.modal-overlay .wallet-section,
.modal-overlay .wallet-section,
.crypto-donation-modal .wallet-section,
.wallet-section {
 margin-bottom: 24px;
}

.modal-overlay .wallet-address-container,
.crypto-donation-modal .wallet-address-container,
.wallet-address-container {
 background: var(--wallet-container-bg);
 border: 1px solid var(--wallet-container-border);
 border-radius: var(--modal-input-radius); padding: 0; overflow: hidden;
 transition: var(--transition-normal);
 box-shadow: var(--shadow-sm);
}

.modal-overlay .wallet-address-container:hover,
.crypto-donation-modal .wallet-address-container:hover,
.wallet-address-container:hover {
 border-color: var(--wallet-container-hover-border);
 box-shadow: var(--shadow-primary-hover);
 transform: translateY(-2px);
}

/* Wallet Header - High Specificity Protection */
body .modal-overlay .wallet-header,
html body .modal-overlay .wallet-header,
.modal-overlay.modal-overlay .wallet-header,
.modal-overlay .wallet-header.wallet-header,
.wallet-header {
 display: flex;
 align-items: center;
 gap: var(--modal-gap-md);
 padding: 16px 20px 12px;
 color: var(--wallet-header-text);
 font-size: var(--modal-input-size);
 font-weight: 600;
 background: var(--wallet-header-bg);
 border-bottom: 1px solid var(--wallet-header-border);
}

.wallet-header i {
 color: var(--color-primary);
 font-size: var(--modal-gap-lg);
 padding: 6px;
 background: var(--wallet-header-icon-bg);
 border-radius: var(--radius-sm);
 border: 1px solid var(--wallet-header-icon-border);
}

.wallet-input-row {
 display: flex;
 gap: 0;
 align-items: stretch;
 padding: var(--modal-padding-md);
 background: var(--wallet-input-row-bg);
}

/* Wallet Address Input - High Specificity Protection */
html body .modal-overlay .wallet-address-input:not([type="button"]):not([type="submit"]),
html body .modal-overlay.modal-overlay .wallet-address-input:not([type="button"]):not([type="submit"]),
html body .modal-overlay .wallet-address-input.wallet-address-input:not([type="button"]):not([type="submit"]),
html body div[class*="modal"] .wallet-address-input:not([type="button"]):not([type="submit"]),
html body .wallet-address-input:not([type="button"]):not([type="submit"]) {
 flex: 1;
 background: var(--wallet-input-bg);
 border: 1px solid var(--wallet-input-border);
 border-right: none;
 border-radius: var(--modal-input-radius) 0 0 var(--modal-input-radius);
 outline: none;
 font-family: 'Monaco', 'Consolas', 'SF Mono', monospace;
 font-size: var(--modal-input-size);
 color: var(--wallet-input-text);
 word-break: break-all;
 line-height: 1.5;
 padding: var(--modal-padding-sm) var(--modal-gap-lg);
 font-weight: var(--modal-input-weight);
 transition: all 0.2s ease;
}

html body .wallet-address-input:not([type="button"]):not([type="submit"]):focus {
 background: var(--wallet-input-focus-bg);
 border-color: var(--wallet-input-focus-border);
 box-shadow: var(--wallet-input-focus-shadow);
}

/* Copy Wallet Button - High Specificity Protection */
body .modal-overlay .copy-wallet-btn,
html body .modal-overlay .copy-wallet-btn,
.modal-overlay.modal-overlay .copy-wallet-btn,
.modal-overlay .copy-wallet-btn.copy-wallet-btn,
.copy-wallet-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: var(--modal-gap-sm);
 padding: var(--modal-padding-sm) var(--modal-padding-md);
 background: var(--gradient-primary);
 color: var(--text-inverse);
 border: 1px solid var(--primary-500);
 border-left: none;
 border-radius: 0 var(--modal-input-radius) var(--modal-input-radius) 0;
 font-size: var(--modal-input-size);
 font-weight: 600;
 cursor: pointer;
 transition: all var(--transition-smooth);
 flex-shrink: 0;
 min-width: 100px;
}

html body .copy-wallet-btn:hover {
 background: var(--gradient-primary-dark);
 transform: translateX(2px);
 box-shadow:
 0 6px 20px var(--rgba-primary-30),
    0 2px 8px var(--rgba-primary-20);
}

.copy-wallet-btn:active {
 transform: translateX(0) scale(0.98);
 transition-duration: 0.15s;
}

.crypto-donation-modal .copy-wallet-btn i,
.modal-overlay .copy-wallet-btn i,
.copy-wallet-btn i {
 font-size: var(--modal-gap-lg);
}



/* Payment Timer - High Specificity Protection */
body .modal-overlay .payment-timer,
html body .modal-overlay .payment-timer,
.modal-overlay.modal-overlay .payment-timer,
.modal-overlay .payment-timer,
.crypto-donation-modal .payment-timer,
.payment-timer {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: var(--modal-padding-sm) var(--modal-padding-md);
 background: var(--gradient-payment-timer);
 border: 1px solid var(--rgba-warning-191-20);
 border-radius: var(--modal-button-radius);
 /*margin-bottom: var(--modal-padding-lg);*/
 position: relative;
 overflow: hidden;
}

.modal-overlay .payment-timer::before,
.crypto-donation-modal .payment-timer::before,
.payment-timer::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 2px;
 background: var(--gradient-payment-timer-top);
 border-radius: var(--modal-button-radius) var(--modal-button-radius) 0 0;
}

.modal-overlay .timer-left,
.crypto-donation-modal .timer-left,
.timer-left {
 display: flex;
 align-items: center;
 gap: 12px;
}

.modal-overlay .timer-icon,
.crypto-donation-modal .timer-icon,
.timer-icon {
 width: 40px;
 height: 40px;
 background: var(--gradient-timer-icon);
 border: 1px solid var(--rgba-warning-191-30);
 border-radius: var(--modal-gap-md);
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 position: relative;
}

.modal-overlay .timer-icon::before,
.crypto-donation-modal .timer-icon::before,
.timer-icon::before {
 content: ''; position: absolute; inset: 2px; border-radius: var(--modal-gap-sm);
 background: var(--gradient-timer-icon-shine);
}

.modal-overlay .timer-icon i,
.crypto-donation-modal .timer-icon i,
.timer-icon i {
 color: var(--warning-600); font-size: 18px; z-index: 1; position: relative;
 animation: timerPulse 2s ease-in-out infinite;
}

/* Timer Label with High Specificity */
.modal-overlay .timer-label,
.crypto-donation-modal .timer-label,
.timer-label {
 color: var(--color-warning-800); font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
}

.modal-overlay .timer-right,
.crypto-donation-modal .timer-right,
.timer-right { display: flex; align-items: center; gap: 8px; }

.modal-overlay .timer-countdown,
.crypto-donation-modal .timer-countdown,
.timer-countdown {
 color: var(--warning-800); font-size: 28px; font-weight: 800; letter-spacing: 1px; position: relative;
 font-family: 'Monaco', 'Consolas', 'SF Mono', monospace;
 text-shadow: 0 1px 2px var(--rgba-warning-800-10);
}

.modal-overlay .timer-countdown::after,
.crypto-donation-modal .timer-countdown::after,
.timer-countdown::after {
 content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px;
 background: var(--gradient-timer-countdown-line);
}

@keyframes timerPulse {
 0%, 100% { transform: scale(1); opacity: 1; }
 50% { transform: scale(1.1); opacity: 0.8; }
}

/* Copy Address Button Base Styles */
.copy-address-btn {
 background: var(--gradient-copy-address-btn);
 color: white;
 border: none;
 padding: var(--ui-gap-md) var(--ui-gap-lg);
 border-radius: var(--ui-radius-sm);
 cursor: pointer;
 font-size: 1rem;
 font-weight: 600;
 transition: var(--transition-smooth);
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 min-height: 56px;
 box-shadow: 0 6px 20px var(--primary-300), 0 3px 10px var(--primary-200);
 position: relative;
 overflow: hidden;
}

/* Copy Address Button Effects */
.copy-address-btn::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: var(--gradient-copy-address-shine);
 transition: left 0.5s ease;
}

html body .copy-address-btn:hover::before {
 left: 100%;
}

html body .copy-address-btn:hover {
 background: var(--gradient-copy-address-btn-hover);
 transform: translateY(-2px);
 box-shadow: 0 10px 28px var(--primary-400), 0 6px 16px var(--primary-300);
}

.copy-address-btn:active {
 transform: translateY(0) scale(0.98);
 transition-duration: 0.1s;
}

/* Timer Section - High Specificity Protection */
body .modal-overlay .timer-section,
html body .modal-overlay .timer-section,
.modal-overlay.modal-overlay .timer-section,
.modal-overlay .timer-section.timer-section,
.timer-section {
 background: var(--gradient-warning-light);
 border: 1px solid var(--rgba-warning-20);
 border-radius: var(--radius-lg);
 padding: 20px;
 text-align: center;
 margin-bottom: 24px;
 position: relative;
 overflow: hidden;
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 box-shadow: var(--shadow-warning-glow), inset 0 1px 0 var(--rgba-white-10);
}

.timer-section::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 2px;
 background: var(--gradient-warning-line);
 border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.timer-section::after {
 content: '⏰';
 position: absolute;
 top: 12px;
 right: 16px;
 font-size: 1.5rem;
 animation: timerPulse 1s ease-in-out infinite;
}

.countdown-timer {
 color: var(--color-warning-800);
 font-size: 1.1rem;
 font-weight: 700;
 font-family: 'Monaco', 'Consolas', monospace;
 letter-spacing: -0.01em;
 text-shadow: 0 1px 2px var(--rgba-orange-10);
}

/* Modern Waiting Status Section */
/* Transaction Status - High Specificity Protection */
body .modal-overlay .transaction-status,
html body .modal-overlay .transaction-status,
.modal-overlay.modal-overlay .transaction-status,
.modal-overlay .transaction-status.transaction-status,
.transaction-status {
 text-align: center;
 /*padding: 20px 24px;*/
 border-radius: var(--radius-lg);
 position: relative;
 overflow: hidden;
 margin-bottom: 8px;
}

/* Status Pending - High Specificity Protection */
body .modal-overlay .status-pending,
html body .modal-overlay .status-pending,
.modal-overlay.modal-overlay .status-pending,
.modal-overlay .status-pending.status-pending,
.status-pending {
 background: var(--gradient-primary-light);
 color: var(--color-primary-800);
 border: 1px solid var(--rgba-primary-15);
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 12px;
 font-weight: 600;
 font-size: 15px;
 backdrop-filter: blur(12px);
 box-shadow: var(--shadow-primary-glow), inset 0 1px 0 var(--rgba-white-10);
 border-radius: 14px;
 padding: 18px 24px;
 position: relative;
}

.status-pending::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 2px;
 background: var(--gradient-primary-line);
 border-radius: 14px 14px 0 0;
}

.status-pending::after {
 content: '';
 position: absolute;
 inset: 0;
 background: var(--gradient-status-shimmer);
 opacity: 0;
 animation: statusShimmer 3s ease-in-out infinite;
 border-radius: 14px;
}

.status-pending i {
 animation: pendingSpin 2s linear infinite;
 font-size: 18px;
 color: var(--color-primary);
 padding: 8px;
 background: var(--rgba-primary-10);
 border-radius: 50%;
 border: 1px solid var(--rgba-primary-20);
}

@keyframes pendingSpin {
 from { transform: rotate(0deg); }
 to { transform: rotate(360deg); }
}

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

/* Modal Footer - High Specificity Protection */
body .modal-overlay .modal-footer,
html body .modal-overlay .modal-footer,
.modal-overlay.modal-overlay .modal-footer,
.modal-overlay .modal-footer.modal-footer,
.modal-footer {
 padding: var(--modal-padding-lg) var(--modal-padding-xl) var(--modal-padding-xl);
 display: flex;
 gap: var(--modal-gap-md);
 flex-wrap: wrap;
 background: var(--modal-footer-bg);
 border-radius: 0 0 var(--modal-footer-radius) var(--modal-footer-radius);
 border-top: 1px solid var(--modal-footer-border);
 backdrop-filter: blur(20px) saturate(180%);
 position: relative;
 z-index: var(--modal-z-content);
}

.modal-footer::before {
 content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
 background: var(--gradient-modal-footer-line);
}

/* Button Base Styles - High Specificity Protection */
body .modal-overlay .verify-payment-btn,
html body .modal-overlay .verify-payment-btn,
.modal-overlay.modal-overlay .verify-payment-btn,
body .modal-overlay .share-btn,
html body .modal-overlay .share-btn,
.modal-overlay.modal-overlay .share-btn,
.verify-payment-btn, .share-btn {
 flex: 1;
 padding: var(--modal-padding-md) var(--modal-padding-lg);
 border: none;
 border-radius: var(--modal-button-radius);
 cursor: pointer;
 font-size: var(--modal-button-size);
 font-weight: var(--modal-button-weight);
 transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 display: flex;
 align-items: center;
 justify-content: center;
 gap: var(--modal-gap-sm);
 min-height: var(--modal-button-height);
 position: relative;
 overflow: hidden;
 letter-spacing: -0.01em;
 box-shadow: 0 4px 16px var(--rgba-black-10);
}

/* Verify Payment Button - High Specificity Protection */
body .modal-overlay .verify-payment-btn,
html body .modal-overlay .verify-payment-btn,
.modal-overlay.modal-overlay .verify-payment-btn,
.crypto-donation-modal .verify-payment-btn,
.modal-overlay .verify-payment-btn,
.verify-payment-btn {
 background: var(--gradient-success); color: white;
}

.crypto-donation-modal .verify-payment-btn:hover,
.modal-overlay .verify-payment-btn:hover,
.verify-payment-btn:hover {
 transform: translateY(-2px); box-shadow: var(--shadow-success-glow);
}

.crypto-donation-modal .verify-payment-btn:active,
.modal-overlay .verify-payment-btn:active,
.verify-payment-btn:active {
 transform: translateY(0); transition-duration: 0.15s;
}

/* Share Button - High Specificity Protection */
body .modal-overlay .share-btn,
html body .modal-overlay .share-btn,
.modal-overlay.modal-overlay .share-btn,
.crypto-donation-modal .share-btn,
.modal-overlay .share-btn,
.share-btn {
 background: var(--gradient-primary); color: var(--text-inverse);
}

.crypto-donation-modal .share-btn:hover,
.modal-overlay .share-btn:hover,
.share-btn:hover {
 transform: translateY(-2px); box-shadow: var(--shadow-primary-glow);
}

.crypto-donation-modal .share-btn:active,
.modal-overlay .share-btn:active,
.share-btn:active {
 transform: translateY(0); transition-duration: 0.15s;
}

/* Simple Icon effects with High Specificity */
.crypto-donation-modal .verify-payment-btn i, 
.modal-overlay .verify-payment-btn i,
.crypto-donation-modal .share-btn i,
.modal-overlay .share-btn i,
.verify-payment-btn i, .share-btn i {
 transition: var(--transition-normal); font-size: 16px;
}

.crypto-donation-modal .verify-payment-btn:hover i,
.modal-overlay .verify-payment-btn:hover i,
.verify-payment-btn:hover i {
 transform: scale(1.1);
}

.crypto-donation-modal .share-btn:hover i,
.modal-overlay .share-btn:hover i,
.share-btn:hover i {
 transform: scale(1.1);
}

/* Modal Footer Submit and Cancel Buttons - Moved from ui-components.css */
.modal-overlay .modal-footer .btn-submit,
.crypto-donation-modal .modal-footer .btn-submit,
.modal-footer .btn-submit {
 flex: 1;
 padding: var(--ui-gap-md) var(--ui-gap-lg);
 background: var(--gradient-primary);
 color: white;
 border: none;
 border-radius: var(--ui-radius-lg);
 font-size: 16px;
 font-weight: 600;
 cursor: pointer;
 transition: var(--transition-smooth);
 box-shadow: 0 8px 24px var(--primary-200), 0 4px 12px var(--primary-100);
 min-width: 140px;
}

.modal-overlay .modal-footer .btn-cancel,
.crypto-donation-modal .modal-footer .btn-cancel,
.modal-footer .btn-cancel {
 flex: 1;
 padding: var(--ui-gap-md) var(--ui-gap-lg);
 background: var(--gradient-surface);
 color: var(--text-tertiary);
 border: 2px solid var(--border-light);
 border-radius: var(--ui-radius-lg);
 font-size: 16px;
 font-weight: 600;
 cursor: pointer;
 transition: var(--transition-smooth);
 min-width: 140px;
}

/* Manual Report Button - Fix Symmetrical Spacing with Higher Specificity */
/* Manual Report Button - Now properly spaced without margin issues */
.modal-footer .manual-report-btn.modal-footer-btn {
    margin: 0; /* Ensure no margins for perfect symmetry */
}/* Modern Success Modal */
.modal-overlay .success-modal,
.crypto-donation-modal .success-modal,
.success-modal {
 text-align: center; overflow: hidden;
 background: var(--success-modal-bg);
 position: relative;
}

.modal-overlay .success-animation,
.crypto-donation-modal .success-animation,
.success-animation {
 padding: 40px 32px; background: var(--gradient-success);
 color: white; border-radius: 24px 24px 0 0; position: relative; overflow: hidden;
}

.modal-overlay .success-animation::before,
.crypto-donation-modal .success-animation::before,
.success-animation::before {
 content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
 background: var(--gradient-success-animation-shimmer);
 animation: successShimmer 3s ease-in-out infinite;
}

@keyframes successShimmer {
 0%, 100% { 
 background: var(--gradient-success-animation-shimmer);
 }
 50% { 
 background: var(--gradient-success-animation-shimmer-alt);
 }
}

.modal-overlay .success-animation i,
.crypto-donation-modal .success-animation i,
.success-animation i {
 font-size: 5rem; animation: successBounce 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 filter: drop-shadow(0 8px 16px var(--rgba-black-20)); position: relative; z-index: 2;
}

@keyframes successBounce {
 0% { transform: scale(0) rotate(-180deg); opacity: 0; }
 60% { transform: scale(1.3) rotate(10deg); opacity: 1; }
 80% { transform: scale(0.9) rotate(-5deg); }
 100% { transform: scale(1) rotate(0deg); }
}

.modal-overlay .success-modal h3,
.crypto-donation-modal .success-modal h3,
.success-modal h3 {
 padding: 24px 32px 0; font-size: 2.5rem; font-weight: 800; color: var(--color-neutral-900);
 letter-spacing: -0.025em; line-height: 1.1; background: var(--gradient-success);
 -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.modal-overlay .success-modal p,
.crypto-donation-modal .success-modal p,
.success-modal p {
    padding: 0 32px 24px;
    color: var(--color-neutral-500);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* Override for success message paragraphs - more specific */
.modal-overlay .success-modal .success-message p,
.crypto-donation-modal .success-modal .success-message p,
.success-modal .success-message p {
    padding: 0;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--primary-700);
    font-weight: 500;
}

/* Transaction Details - High Specificity Protection */
body .modal-overlay .transaction-details,
html body .modal-overlay .transaction-details,
.modal-overlay.modal-overlay .transaction-details,
.modal-overlay .transaction-details,
.crypto-donation-modal .transaction-details,
.transaction-details {
 background: var(--success-details-bg); margin: 0 var(--modal-padding-lg) var(--modal-padding-lg); padding: var(--modal-padding-lg);
 border-radius: var(--radius-lg); text-align: left;
 border: 1px solid var(--success-details-border);
 backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: relative;
 overflow: hidden;
}

.modal-overlay .transaction-details::before,
.crypto-donation-modal .transaction-details::before,
.transaction-details::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: var(--gradient-transaction-details-line);
}

/* Transaction Detail Item - High Specificity Protection */
body .modal-overlay .transaction-detail,
html body .modal-overlay .transaction-detail,
.modal-overlay.modal-overlay .transaction-detail,
.modal-overlay .transaction-detail,
.crypto-donation-modal .transaction-detail,
.transaction-detail {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin: var(--modal-gap-sm) 0;
 padding: var(--modal-gap-sm) 0;
 border-bottom: 1px solid var(--success-details-item-border);
}

/* Transaction Detail Last Child - High Specificity Protection */
body .modal-overlay .transaction-detail:last-child,
html body .modal-overlay .transaction-detail:last-child,
.modal-overlay.modal-overlay .transaction-detail:last-child,
.modal-overlay .transaction-detail:last-child,
.transaction-detail:last-child {
 border-bottom: none;
}

/* Transaction Detail Strong - High Specificity Protection */
body .modal-overlay .transaction-detail strong,
html body .modal-overlay .transaction-detail strong,
.modal-overlay.modal-overlay .transaction-detail strong,
.modal-overlay .transaction-detail strong,
.transaction-detail strong {
 color: var(--success-details-text);
 font-weight: 600;
 min-width: 120px;
 text-align: left;
}

/* Transaction Reference - High Specificity Protection */
body .modal-overlay .transaction-ref,
html body .modal-overlay .transaction-ref,
.modal-overlay.modal-overlay .transaction-ref,
.modal-overlay .transaction-ref,
.transaction-ref {
 font-family: 'Monaco', 'Consolas', monospace;
 background: var(--success-ref-bg);
 padding: 4px var(--modal-gap-sm);
 border-radius: 6px;
 font-size: 0.9rem;
 color: var(--success-ref-text);
 border: 1px solid var(--success-ref-border);
}

/* Copy Button - High Specificity Protection */
body .modal-overlay .copy-btn:not(.success-modal .copy-btn),
html body .modal-overlay .copy-btn:not(.success-modal .copy-btn),
.modal-overlay.modal-overlay .copy-btn:not(.success-modal .copy-btn),
.modal-overlay .copy-btn:not(.success-modal .copy-btn),
.copy-btn:not(.success-modal .copy-btn) {
 background: none;
 border: none;
 color: var(--success-copy-text);
 cursor: pointer;
 padding: 4px var(--modal-gap-sm);
 border-radius: 6px;
 transition: all 0.2s ease;
 font-size: 0.9rem;
 margin-left: var(--modal-gap-sm);
}

html body .copy-btn:not(.success-modal .copy-btn):hover {
 background: var(--success-copy-hover-bg);
 color: var(--success-copy-hover-text);
}

.modal-overlay .reference-note,
.crypto-donation-modal .reference-note,
.reference-note {
 margin-top: var(--modal-padding-sm);
 padding: var(--modal-gap-md);
 background: var(--success-note-bg);
 border: 1px solid var(--success-note-border);
 border-radius: var(--modal-gap-sm);
 display: flex;
 align-items: flex-start;
 gap: var(--modal-gap-sm);
}

.modal-overlay .reference-note i,
.crypto-donation-modal .reference-note i,
.reference-note i {
 color: var(--success-note-icon);
 margin-top: 2px;
}

.modal-overlay .reference-note p,
.crypto-donation-modal .reference-note p,
.reference-note p {
 margin: 0;
 font-size: 0.85rem;
 color: var(--success-note-text);
 line-height: 1.4;
 font-family: inherit;
}

.modal-overlay .transaction-details p,
.crypto-donation-modal .transaction-details p,
.transaction-details p {
 margin: var(--modal-gap-sm) 0;
 padding: 0;
 font-family: 'Monaco', 'Consolas', monospace;
 font-size: 0.95rem;
 color: var(--success-details-text);
 font-weight: 500;
}

.modal-overlay .success-actions,
.crypto-donation-modal .success-actions,
.success-actions {
 padding: var(--modal-padding-lg) var(--modal-padding-xl) var(--modal-padding-xl);
 display: flex;
 flex-direction: column;
 gap: var(--space-md);
 background: var(--gradient-ui-modal);
 border-radius: var(--radius-lg);
 border-top: 1px solid var(--border-light);
}

/* Success Modal Buttons - Base Styles */
.crypto-donation-modal .download-receipt-btn, 
.modal-overlay .download-receipt-btn,
.crypto-donation-modal .share-success-btn,
.modal-overlay .share-success-btn,
.crypto-donation-modal .close-success-btn,
.modal-overlay .close-success-btn,
.download-receipt-btn, 
.share-success-btn, 
.close-success-btn {
 padding: var(--space-lg) var(--space-2xl);
 border: none;
 border-radius: var(--radius-md);
 cursor: pointer;
 font-size: var(--modal-button-size);
 font-weight: var(--modal-button-weight);
 transition: var(--transition-bouncy);
 display: flex;
 align-items: center;
 justify-content: center;
 gap: var(--space-md);
 min-height: var(--modal-button-min-height);
 position: relative;
 overflow: hidden;
 color: white;
}

/* Button-specific backgrounds and shadows */
.crypto-donation-modal .download-receipt-btn,
.modal-overlay .download-receipt-btn,
.download-receipt-btn {
 background: var(--btn-download-bg);
 box-shadow: var(--btn-download-shadow);
}

.crypto-donation-modal .share-success-btn,
.modal-overlay .share-success-btn,
.share-success-btn {
 background: var(--btn-share-success-bg);
 box-shadow: var(--btn-share-success-shadow);
}

.crypto-donation-modal .close-success-btn,
.modal-overlay .close-success-btn,
.close-success-btn {
 background: var(--btn-close-success-bg);
 box-shadow: var(--btn-close-success-shadow);
}

.crypto-donation-modal .download-receipt-btn:hover,
.modal-overlay .download-receipt-btn:hover,
.download-receipt-btn:hover {
 background: var(--btn-download-hover);
 transform: translateY(-2px);
 box-shadow: var(--shadow-primary-glow), 0 6px 16px var(--rgba-primary-30);
}

.crypto-donation-modal .share-success-btn:hover,
.modal-overlay .share-success-btn:hover,
.share-success-btn:hover {
 background: var(--gradient-success);
 transform: translateY(-2px);
 box-shadow: var(--shadow-success-glow), 0 6px 16px var(--rgba-success-30);
}

.crypto-donation-modal .close-success-btn:hover,
.modal-overlay .close-success-btn:hover,
.close-success-btn:hover {
 background: var(--btn-close-success-hover);
 transform: translateY(-2px);
 box-shadow: var(--shadow-neutral-glow);
}

.crypto-donation-modal .download-receipt-btn:active,
.modal-overlay .download-receipt-btn:active,
.crypto-donation-modal .share-success-btn:active,
.modal-overlay .share-success-btn:active,
.crypto-donation-modal .close-success-btn:active,
.modal-overlay .close-success-btn:active,
.download-receipt-btn:active, 
.share-success-btn:active, 
.close-success-btn:active {
 transform: translateY(0) scale(0.98); transition-duration: 0.1s;
}

/* ===============================================
   RTL (Right-to-Left) Support Fixes
   =============================================== */

/* RTL Modal Layout */
[dir="rtl"] .modal-content,
.rtl .modal-content {
 direction: rtl;
 text-align: right;
}

/* RTL Wallet Section Fixes */
[dir="rtl"] .wallet-input-row,
.rtl .wallet-input-row {
 direction: rtl;
 flex-direction: row-reverse;
}

html body [dir="rtl"] .wallet-address-input:not([type="button"]):not([type="submit"]),
html body .rtl .wallet-address-input:not([type="button"]):not([type="submit"]) {
 border-right: 1px solid var(--rgba-gray-60);
 border-left: none;
 border-radius: 0 12px 12px 0;
 text-align: right;
 direction: rtl;
}

[dir="rtl"] .copy-wallet-btn,
.rtl .copy-wallet-btn {
 border-right: none;
 border-left: 1px solid var(--primary-500);
 border-radius: var(--modal-input-radius) 0 0 var(--modal-input-radius); /* Rounded on left for RTL */
 min-width: 120px; /* Increased for Arabic text */
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

[dir="rtl"] .copy-wallet-btn:hover,
.rtl .copy-wallet-btn:hover {
 transform: translateX(2px); /* Fixed direction for RTL */
}

/* RTL Modal Footer Fixes */
[dir="rtl"] .modal-footer,
.rtl .modal-footer {
 direction: rtl;
 padding: 24px 28px 28px;
 /* Ensure buttons stay within bounds */
 overflow: hidden;
 box-sizing: border-box;
}

[dir="rtl"] .verify-payment-btn,
[dir="rtl"] .share-btn,
.rtl .verify-payment-btn,
.rtl .share-btn {
 flex: 1;
 min-width: 0; /* Allow buttons to shrink */
 max-width: 100%;
 box-sizing: border-box;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

/* RTL Modal Close Button */
[dir="rtl"] .modal-close,
.rtl .modal-close {
 left: 24px;
 right: auto;
}

/* RTL QR Section */
[dir="rtl"] .qr-section,
.rtl .qr-section {
 direction: ltr; /* Keep QR code in LTR */
 text-align: center;
}

[dir="rtl"] .scan-instruction,
.rtl .scan-instruction {
 direction: rtl;
 text-align: center;
}

/* RTL Timer Section */
[dir="rtl"] .payment-timer,
.rtl .payment-timer {
 direction: rtl;
}

[dir="rtl"] .timer-left,
.rtl .timer-left {
 direction: rtl;
}

[dir="rtl"] .timer-right,
.rtl .timer-right {
 direction: ltr; /* Keep countdown in LTR */
}

/* Mobile RTL Fixes */
@media (max-width: 768px) {
 [dir="rtl"] .modal-footer,
 .rtl .modal-footer {
  padding: 20px 24px 24px;
  flex-direction: column;
  gap: 12px;
 }
 
 [dir="rtl"] .verify-payment-btn,
 [dir="rtl"] .share-btn,
 .rtl .verify-payment-btn,
 .rtl .share-btn {
  width: 100%;
  min-height: 56px;
 }
 
 [dir="rtl"] .copy-wallet-btn,
 .rtl .copy-wallet-btn {
  min-width: 100px;
  padding: 12px 16px;
  font-size: 13px;
 }
}

@media (max-width: 480px) {
 [dir="rtl"] .modal-footer,
 .rtl .modal-footer {
  padding: 16px 20px 20px;
  gap: 10px;
 }
 
 [dir="rtl"] .verify-payment-btn,
 [dir="rtl"] .share-btn,
 .rtl .verify-payment-btn,
 .rtl .share-btn {
  padding: 14px 16px;
  font-size: 14px;
  min-height: 52px;
 }
 
 [dir="rtl"] .copy-wallet-btn,
 .rtl .copy-wallet-btn {
  min-width: 90px;
  padding: 10px 12px;
  font-size: 12px;
 }
 
 [dir="rtl"] .wallet-input-row,
 .rtl .wallet-input-row {
  flex-direction: column;
  gap: 8px;
 }
 
 html body [dir="rtl"] .wallet-address-input:not([type="button"]):not([type="submit"]),
 html body .rtl .wallet-address-input:not([type="button"]):not([type="submit"]) {
  border: 1px solid var(--rgba-gray-60);
  border-radius: 12px;
 }
 
 [dir="rtl"] .copy-wallet-btn,
 .rtl .copy-wallet-btn {
  border-radius: var(--modal-input-radius); /* Use consistent variable for mobile RTL */
  border: 1px solid var(--primary-500);
  width: 100%;
  justify-content: center;
 }
}

/* ===============================================
   MANUAL REPORT FORM STYLES - Moved from ui-components.css
   =============================================== */
.modal-overlay .manual-report-modal .currency-icon-large,
.crypto-donation-modal .manual-report-modal .currency-icon-large,
.manual-report-modal .currency-icon-large {
 background: var(--gradient-manual-report-icon);
 border: 2px solid var(--rgba-error-20);
    box-shadow: 0 8px 32px var(--rgba-error-15), 0 4px 16px var(--rgba-error-10), inset 0 1px 0 var(--rgba-white-10);
}

.modal-overlay .manual-report-modal .currency-icon-large i,
.crypto-donation-modal .manual-report-modal .currency-icon-large i,
.manual-report-modal .currency-icon-large i {
 color: var(--error-500);
 text-shadow: 0 2px 8px var(--rgba-error-30);
}

/* Enhanced Manual Report Form Group Styles */
.modal-overlay .manual-report-form-group,
.crypto-donation-modal .manual-report-form-group,
.manual-report-form-group {
 margin-bottom: var(--ui-gap-xl);
 position: relative;
}

.modal-overlay .manual-report-form-group label,
.crypto-donation-modal .manual-report-form-group label,
.manual-report-form-group label {
 display: block;
 margin-bottom: var(--ui-gap-md);
 font-weight: 600;
 color: var(--gray-800);
 font-size: 15px;
 line-height: 1.4;
 letter-spacing: -0.01em;
}

/* Required field indicator */
.modal-overlay .manual-report-form-group label:has(+ input[required])::after,
.crypto-donation-modal .manual-report-form-group label:has(+ input[required])::after,
.manual-report-form-group label:has(+ input[required])::after {
 content: ' *';
 color: var(--error-500);
 font-weight: 700;
}

/* Enhanced form inputs */
html body .modal-overlay .manual-report-form-group input:not([type="button"]):not([type="submit"]),
html body .modal-overlay .manual-report-form-group textarea,
html body .crypto-donation-modal .manual-report-form-group input:not([type="button"]):not([type="submit"]),
html body .crypto-donation-modal .manual-report-form-group textarea,
html body .manual-report-form-group input:not([type="button"]):not([type="submit"]),
html body .manual-report-form-group textarea,
html body .modal-overlay .form-input:not([type="button"]):not([type="submit"]),
html body .crypto-donation-modal .form-input:not([type="button"]):not([type="submit"]),
html body .form-input:not([type="button"]):not([type="submit"]) {
 width: 100%;
 padding: 14px 16px;
 border: 2px solid var(--gray-300);
 border-radius: var(--ui-radius-md);
 font-size: 15px;
 line-height: 1.5;
 background: var(--surface-primary);
 color: var(--text-primary);
 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 box-shadow: 0 1px 3px var(--rgba-gray-10), inset 0 1px 2px var(--rgba-gray-05);
 font-family: inherit;
}

/* Focus states */
html body .modal-overlay .manual-report-form-group input:not([type="button"]):not([type="submit"]):focus,
html body .modal-overlay .manual-report-form-group textarea:focus,
html body .crypto-donation-modal .manual-report-form-group input:not([type="button"]):not([type="submit"]):focus,
html body .crypto-donation-modal .manual-report-form-group textarea:focus,
html body .manual-report-form-group input:not([type="button"]):not([type="submit"]):focus,
html body .manual-report-form-group textarea:focus,
html body .modal-overlay .form-input:not([type="button"]):not([type="submit"]):focus,
html body .crypto-donation-modal .form-input:not([type="button"]):not([type="submit"]):focus,
html body .form-input:not([type="button"]):not([type="submit"]):focus {
 outline: none;
 border-color: var(--primary-500);
 box-shadow: 0 0 0 3px var(--rgba-primary-15), 0 2px 8px var(--rgba-primary-10), inset 0 1px 2px var(--rgba-gray-05);
 background: var(--surface-modal);
}

/* Placeholder styling */
html body .modal-overlay .manual-report-form-group input:not([type="button"]):not([type="submit"])::placeholder,
html body .modal-overlay .manual-report-form-group textarea::placeholder,
html body .crypto-donation-modal .manual-report-form-group input:not([type="button"]):not([type="submit"])::placeholder,
html body .crypto-donation-modal .manual-report-form-group textarea::placeholder,
html body .manual-report-form-group input:not([type="button"]):not([type="submit"])::placeholder,
html body .manual-report-form-group textarea::placeholder,
html body .modal-overlay .form-input:not([type="button"]):not([type="submit"])::placeholder,
html body .crypto-donation-modal .form-input:not([type="button"]):not([type="submit"])::placeholder,
html body .form-input:not([type="button"]):not([type="submit"])::placeholder {
 color: var(--gray-500);
 opacity: 1;
 font-style: italic;
}

/* Readonly inputs (like wallet address) */
html body .modal-overlay .manual-report-form-group input:not([type="button"]):not([type="submit"])[readonly],
html body .crypto-donation-modal .manual-report-form-group input:not([type="button"]):not([type="submit"])[readonly],
html body .manual-report-form-group input:not([type="button"]):not([type="submit"])[readonly] {
 background: var(--gray-50);
 color: var(--gray-700);
 cursor: not-allowed;
 border-color: var(--gray-200);
}

/* Textarea specific styling */
.modal-overlay .manual-report-form-group textarea,
.crypto-donation-modal .manual-report-form-group textarea,
.manual-report-form-group textarea {
 min-height: 120px;
 resize: vertical;
 font-family: inherit;
}

/* Box sizing for all elements */
.modal-overlay .manual-report-form-group *,
.crypto-donation-modal .manual-report-form-group *,
.manual-report-form-group * {
 box-sizing: border-box;
}





/* ========== frontend\notifications.css ========== */
/* ===============================================
   NOTIFICATION SYSTEM
   Uses unified tokens from shared/tokens.css
   =============================================== */

/* tokens.css imported globally via main.css */

/* ===========================================
 10. NOTIFICATION SYSTEM
 =========================================== */

/* Notification Container */
.notification-container {
 position: fixed; top: 24px; right: 24px; z-index: var(--z-notification); pointer-events: none;
}

/* Base Notification */
.notification {
 background: var(--gradient-light);
 border: 1px solid var(--rgba-white-18); border-radius: var(--radius-lg);
 padding: 20px 24px; margin-bottom: 12px;
 box-shadow: var(--shadow-xl), 0 0 0 1px var(--rgba-white-05);
 display: flex; align-items: center; gap: 16px; max-width: 400px;
 animation: notificationSlideIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
 border-left: 4px solid var(--color-success);
 backdrop-filter: blur(24px) saturate(180%);
 pointer-events: auto; position: relative; overflow: hidden;
 font-weight: 500; color: var(--color-neutral-900);
}

.notification::before {
 content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
 background: var(--gradient-success-line); z-index: 1; pointer-events: none;
}

.notification::after {
 content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
 background: var(--gradient-neutral-line);
 animation: notificationShimmer 2s ease-in-out; z-index: 0; pointer-events: none;
}

@keyframes notificationSlideIn {
 from { 
 transform: translateX(100%) scale(0.9);
 opacity: 0;
 filter: blur(8px);
 }
 60% { 
 transform: translateX(-8px) scale(1.02);
 opacity: 0.9;
 filter: blur(2px);
 }
 to { 
 transform: translateX(0) scale(1);
 opacity: 1;
 filter: blur(0);
 }
}

/* Simplified mobile notification animation */
@keyframes notificationSlideInMobile {
 0% { 
  opacity: 0; 
  transform: translateY(-15px);
 }
 100% { 
  opacity: 1; 
  transform: translateY(0);
 }
}

@keyframes notificationShimmer {
 0% { left: -100%; }
 100% { left: 100%; }
}

.notification.error {
 border-left-color: var(--error-500);
 background: var(--gradient-notification-error);
}

.notification.error::before {
 background: var(--gradient-notification-error-line);
}

.notification.warning {
 border-left-color: var(--warning-500);
 background: var(--gradient-notification-warning);
}

.notification.warning::before {
 background: var(--gradient-notification-warning-line);
}

.notification i.fas,
.notification i.notification-icon,
.notification .fas.fa-check-circle {
 font-size: 1.5rem;
 color: var(--text-inverse);
 flex-shrink: 0;
 text-shadow: 0 1px 2px var(--rgba-black-30);
}

.notification.error i.fas,
.notification.error i.notification-icon,
.notification.error .fas.fa-check-circle {
 color: var(--text-inverse);
 text-shadow: 0 1px 2px var(--rgba-black-40);
}

.notification.warning i.fas,
.notification.warning i.notification-icon,
.notification.warning .fas.fa-check-circle {
 color: var(--text-inverse);
 text-shadow: 0 1px 2px var(--rgba-black-40);
}

.notification.success i.fas,
.notification.success i.notification-icon,
.notification.success .fas.fa-check-circle {
 color: var(--text-inverse);
 text-shadow: 0 1px 2px var(--rgba-black-30);
}

/* Additional Modern Keyframes and Utilities */
@keyframes modalBackdropBlur {
 from { 
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
 }
 to { 
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
 }
}

/* Mobile-optimized notification animations */
@media (max-width: 768px) {
 .notification {
  animation: notificationSlideInMobile 0.3s ease-out;
  backdrop-filter: blur(8px) saturate(120%);
 }
}

@media (max-width: 480px) {
 .notification {
  animation: notificationSlideInMobile 0.2s ease-out;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
 }
}





/* ========== frontend\responsive.css ========== */
/* ===============================================
   RESPONSIVE DESIGN & MOBILE
   Uses unified tokens from shared/tokens.css
   =============================================== */

/* tokens.css imported globally via main.css */

/* ===========================================
 11. RESPONSIVE DESIGN & MOBILE STYLES
 =========================================== */

/* Enhanced Donation Summary Styles for All Devices */
.donation-summary-compact {
 display: flex;
 justify-content: center;
 margin: 16px 0 12px;
 padding: 0 8px;
}

.summary-badge {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 background: var(--gradient-summary-badge);
 border: 1px solid var(--border-focus);
 border-radius: var(--radius-xl);
 padding: 6px 12px;
 font-size: clamp(0.8rem, 2.5vw, 0.85rem);
 font-weight: 500;
 color: var(--text-primary);
 backdrop-filter: blur(8px);
 box-shadow: 0 2px 8px var(--rgba-black-04), 0 1px 3px var(--rgba-black-04);
 transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
 position: relative;
 overflow: hidden;
 flex-wrap: wrap;
 justify-content: center;
 max-width: 100%;
}

.summary-badge::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: var(--gradient-summary-shimmer);
 transition: left 0.5s ease;
}

.summary-badge:hover::before {
 left: 100%;
}

.summary-label {
 color: var(--text-secondary);
 font-size: clamp(0.7rem, 2vw, 0.75rem);
 font-weight: 500;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.summary-amount {
 font-size: clamp(0.95rem, 3vw, 1rem);
 font-weight: 700;
 background: var(--gradient-summary-amount);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 line-height: 1;
}

.summary-crypto {
 font-size: clamp(0.75rem, 2vw, 0.8rem);
 color: var(--color-slate-500);
 font-family: 'Monaco', 'Consolas', monospace;
 font-weight: 500;
 background: var(--surface-tertiary);
 padding: 1px 6px;
 border-radius: var(--radius-xs);
 border: 1px solid var(--border-light);
}

.summary-badge:hover {
 transform: translateY(-1px);
 box-shadow: 0 4px 12px var(--rgba-black-08), 0 2px 6px var(--rgba-black-04);
 border-color: var(--border-focus);
}

.summary-badge:active {
 transform: scale(0.98);
 transition: transform 0.1s ease;
}

.summary-crypto.selected {
 background: var(--success-50);
 border-color: var(--success-300);
 color: var(--success-800);
 animation: cryptoSelected 0.5s ease;
}

@keyframes cryptoSelected {
 0% { transform: scale(1); }
 50% { transform: scale(1.05); }
 100% { transform: scale(1); }
}

/* TABLET & MOBILE STYLES */
@media screen and (max-width: 768px) {

 
 /* Enhanced carousel - Universal Display Approach */
 /* No longer need mobile-specific overrides since we use display-based approach everywhere */
 /* JavaScript handles the show/hide logic with smooth animations */
 
 /* Mobile-specific slide adjustments */
 @media (max-width: 768px) {
 .crypto-donation-container .carousel-slide {
 padding: 16px 12px 20px;
 }
 
 .crypto-donation-container .carousel-slide::before {
 display: none;
 }
 
 /* Payment slide specific enhancements */
 .payment-slide .slide-content {
 gap: 20px; 
 display: flex; 
 flex-direction: column;
 }
 
 /* Enhanced slide actions for mobile */
 .payment-slide .slide-actions {
 padding: 16px 20px 20px; 
 gap: 12px; 
 flex-direction: column;
 }
 
 .payment-slide .slide-actions .prev-btn,
 .payment-slide .slide-actions .proceed-btn {
 width: 100%; 
 padding: 14px 20px; 
 font-size: 15px;
 border-radius: var(--radius-md);
 }
 
 .payment-slide .slide-actions .prev-btn {
 order: 2;
 background: var(--gradient-slide-prev);
 color: var(--text-tertiary);
 border: 2px solid var(--border-light);
 }
 
 .payment-slide .slide-actions .proceed-btn {
 order: 1;
 }
 
 
 
 /* Slide Headers */
 .slide-header {
 text-align: center;
 margin-bottom: 24px;
 flex-shrink: 0;
 }
 
 .step-icon {
 width: 64px;
 height: 64px;
 margin: 0 auto 16px;
 box-shadow:
 0 8px 24px var(--primary-200),
 0 4px 12px var(--primary-100);
 }
 
 .step-icon i {
 font-size: 1.5rem;
 }
 
 .slide-header h3 {
 font-size: clamp(1.6rem, 5vw, 2rem);
 margin-bottom: 8px;
 line-height: 1.2;
 }
 
 .slide-header p {
 font-size: clamp(0.9rem, 3vw, 1rem);
 line-height: 1.4;
 margin: 0 auto; /* Center the paragraph properly */
 opacity: 0.85;
 text-align: center; /* Ensure text is centered */
 max-width: 90%; /* Prevent text from going to edges */
 }
 
 /* Section Headers */
 .amount-section, .crypto-section {
 padding: 0;
 }
 
 .amount-section h3, .crypto-section h3 {
 font-size: clamp(1.1rem, 3.5vw, 1.3rem);
 margin-bottom: 16px;
 color: var(--text-primary);
 text-align: center;
 font-weight: 600;
 }
 
 /* Amount grid styles consolidated in core.css to avoid duplication */

 /* Amount button selected styles moved to amount-selection.css for better organization */
 
 /* Amount value and button styles consolidated in amount-selection.css to avoid duplication */
 
 /* Custom Amount Input - MOVED TO crypto-donation-core.css for better organization and to prevent conflicts */
 /* 
 The custom amount input styles have been moved to crypto-donation-core.css
 for better organization and enhanced functionality. This prevents style conflicts
 and provides a more modern, animated, and responsive design.
 */
 
 /* Selected Amount Display styles moved to crypto-donation-ui.css to avoid duplication */
 
 /* USD Amount mobile styles handled in crypto-donation-ui.css */
 
 /* Crypto Selection - Fixed container to prevent overflow */
 .crypto-section {
 padding: 0;
 margin-top: 8px;
 }
 
 /* .crypto-grid responsive styles consolidated in core.css media queries */
 

 
 .crypto-btn.selected {
 border-color: var(--success-600);
 background: var(--gradient-success);
 color: white;
 box-shadow: var(--shadow-success-glow);
 transform: translateY(-2px);
 }
 
 .crypto-btn .crypto-icon {
 font-size: clamp(1.6rem, 4vw, 1.8rem);
 flex-shrink: 0;
 width: 48px;
 height: 48px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 12px;
 background: var(--gradient-crypto-icon);
 transition: all 0.2s ease;
 }
 
 .crypto-btn.selected .crypto-icon {
 background: var(--rgba-white-20);
 color: white;
 }
 
 .crypto-btn .crypto-info {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 min-width: 0;
 gap: 2px;
 }
 
 .crypto-btn .crypto-name {
 font-size: clamp(0.95rem, 3vw, 1rem);
 font-weight: 600;
 color: var(--gray-800);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 line-height: 1.2;
 }
 
 .crypto-btn.selected .crypto-name {
 color: white;
 }
 
 .crypto-btn .crypto-symbol {
 font-size: clamp(0.8rem, 2.5vw, 0.85rem);
 color: var(--gray-500);
 font-weight: 500;
 text-transform: uppercase;
 line-height: 1;
 }
 
 .crypto-btn.selected .crypto-symbol {
 color: var(--rgba-white-80);
 }
 
 .crypto-price-info {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 2px;
 min-width: 0;
 }
 
 .crypto-price {
 font-size: clamp(0.8rem, 2.5vw, 0.85rem);
 color: var(--gray-600);
 margin: 0;
 line-height: 1.2;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 font-weight: 500;
 }
 
 .crypto-btn.selected .crypto-price {
 color: var(--rgba-white-90);
 }
 
 .price-change {
 font-size: clamp(0.75rem, 2vw, 0.8rem);
 margin: 0;
 font-weight: 500;
 line-height: 1;
 }
 
 .price-change.positive {
 color: var(--success-500);
 }
 
 .price-change.negative {
 color: var(--error-500);
 }
 
 .crypto-btn.selected .price-change.positive,
 .crypto-btn.selected .price-change.negative {
 color: var(--rgba-white-90);
 }
 
 /* Mobile Slide Actions - Modern Design */
 .slide-actions {
 margin-top: 16px; /* Reduced from 24px */
 padding-top: 12px; /* Reduced from 20px */
 border-top: 1px solid var(--rgba-border-light);
 display: flex;
 flex-direction: row; /* Side by side on mobile */
 gap: 12px;
 width: 100%;
 justify-content: space-between;
 flex-shrink: 0; /* Prevent layout gaps */
 }
 
 .prev-btn, .next-btn, .proceed-btn {
 flex: 1;
 padding: 14px 20px;
 font-size: 0.95rem;
 font-weight: 600;
 border-radius: 12px;
 min-height: 50px;
 transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 border: 2px solid transparent;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 -webkit-tap-highlight-color: transparent;
 position: relative;
 overflow: hidden;
 text-decoration: none;
 outline: none;
 box-sizing: border-box;
 }
 
 .prev-btn {
 background: var(--gradient-prev-btn);
    color: var(--color-slate-600);
    border-color: var(--rgba-slate-20);
    box-shadow: 0 2px 8px var(--rgba-black-04), 0 1px 3px var(--rgba-black-04);
 }
 
 .prev-btn:active {
 transform: scale(0.97);
 background: var(--gradient-prev-btn-active);
 box-shadow: inset 0 2px 4px var(--rgba-black-06);
 }
 
 .next-btn, .proceed-btn {
 background: var(--gradient-success-dark);
 color: white;
 border-color: var(--rgba-white-20);
 box-shadow: 
 0 4px 15px var(--rgba-green-129-25),
 0 2px 6px var(--rgba-green-129-15);
 font-weight: 700;
 }
 
 .next-btn:active, .proceed-btn:active {
 transform: scale(0.97);
 background: var(--gradient-next-btn-active);
 box-shadow: 
 inset 0 2px 4px var(--rgba-black-10),
 0 2px 8px var(--rgba-green-129-20);
 }
 
 .next-btn:disabled, .proceed-btn:disabled {
 background: var(--gradient-btn-disabled);
 color: var(--color-gray-175);
 border-color: transparent;
 box-shadow:
 0 2px 8px var(--rgba-black-06),
 0 1px 3px var(--rgba-black-04);
 cursor: not-allowed;
 transform: none;
 }
 
 /* Modal System */
 .modal-overlay {
 padding: 0;
 align-items: flex-end;
 justify-content: center;
 background: var(--gradient-modal-overlay);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 }
 
 .modal-overlay .modal-content,
 .crypto-donation-modal .modal-content,
 .modal-content {
 width: 100%;
 max-width: 100%;
 margin: 0;
 max-height: 95vh;
 overflow-y: auto;
 border-radius: 20px 20px 0 0;
 transform: translateY(100%);
 transition: transform 0.4s ease;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
 -ms-overflow-style: none;
 overscroll-behavior: contain;
 box-shadow:
 0 -8px 32px var(--rgba-black-20),
        0 -4px 16px var(--rgba-black-10);
 }
 
 .modal-overlay .modal-content::-webkit-scrollbar,
 .crypto-donation-modal .modal-content::-webkit-scrollbar,
 .modal-content::-webkit-scrollbar {
 display: none;
 }
 
 .modal-overlay.show .modal-content {
 transform: translateY(0);
 }
 
 .modal-overlay .modal-header,
 .crypto-donation-modal .modal-header,
 .modal-header {
 padding: 24px 16px 20px;
 border-radius: 20px 20px 0 0;
 position: sticky;
 top: 0;
 z-index: 15;
 background: var(--gradient-modal-header);
 backdrop-filter: blur(24px);
 -webkit-backdrop-filter: blur(24px);
 border-bottom: 1px solid var(--rgba-black-05);
 }
 
 .modal-header::after {
 content: '';
 position: absolute;
 top: 8px;
 left: 50%;
 transform: translateX(-50%);
 width: 40px;
 height: 4px;
 background: var(--rgba-slate-30);
 border-radius: 2px;
 }
 
 .header-content {
 gap: 12px;
 }
 
 .currency-icon-large {
 width: 52px;
 height: 52px;
 border-radius: 14px;
 }
 
 .currency-icon-large i {
 font-size: 20px;
 }
 
 .modal-overlay .modal-title,
 .crypto-donation-modal .modal-title,
 .modal-title {
 font-size: clamp(1.8rem, 5vw, 2.2rem);
 }
 
 .donation-summary-inline {
 gap: 12px;
 }
 
 .crypto-amount-summary {
 font-size: 14px;
 padding: 6px 12px;
 }
 
 .wallet-section {
 margin-bottom: 20px;
 }
 
 .wallet-address-container {
 border-radius: 14px;
 }
 
 .wallet-header {
 padding: 14px 18px 10px;
 font-size: 14px;
 }
 
 .wallet-header i {
 font-size: 16px;
 padding: 5px;
 }
 
 .wallet-input-row {
 padding: 16px;
 }
 
 html body .wallet-address-input:not([type="button"]):not([type="submit"]) {
 font-size: 13px;
 padding: 14px 16px;
 }
 
 .copy-wallet-btn {
 padding: 14px 18px;
 font-size: 13px;
 min-width: 90px;
 }
 
 html body .wallet-address-input:not([type="button"]):not([type="submit"]) {
 font-size: 12px;
 }
 
 .copy-wallet-btn {
 padding: 6px 10px;
 font-size: 12px;
 }
 
 .copy-wallet-btn span {
 display: none;
 }
 
 .payment-timer {
 padding: 14px 16px;
 gap: 8px;
 }
 
 .timer-left {
 gap: 10px;
 }
 
 .timer-icon {
 width: 36px;
 height: 36px;
 border-radius: var(--radius-sm);
 }
 
 .timer-icon i {
 font-size: 16px;
 }
 
 .timer-label {
 font-size: 14px;
 }
 
 .timer-countdown {
 font-size: 24px;
 letter-spacing: 0.5px;
 }
 
 .modal-close {
 top: 20px;
 right: 20px;
 width: 36px;
 height: 36px;
 font-size: 16px;
 }
 
 .currency-icon-large {
 width: 60px;
 height: 60px;
 margin: 0 auto 16px;
 border-radius: var(--radius-lg);
 box-shadow:
 0 6px 20px var(--rgba-primary-20),
    0 2px 8px var(--rgba-primary-10);
 }
 
 .currency-icon-large i {
 font-size: 1.8rem;
 }
 
 .modal-title {
 font-size: clamp(1.6rem, 5vw, 2rem);
 line-height: 1.3;
 margin-bottom: 8px;
 }
 
 .donation-summary {
 padding: 16px;
 margin-top: 4px;
 border-radius: 14px;
 box-shadow:
 0 4px 12px var(--rgba-primary-08),
    0 1px 3px var(--rgba-primary-05);
 }
 
 /* Amount Summary mobile styles handled in crypto-donation-ui.css */
 
 .crypto-amount-summary {
 font-size: clamp(0.9rem, 2.5vw, 1rem);
 padding: 6px 12px;
 border-radius: 8px;
 }
 
 .modal-overlay .modal-body,
 .crypto-donation-modal .modal-body,
 .modal-body {
 padding: 16px;
 background: var(--gradient-modal-body);
 }
 
 .qr-section {
 text-align: center;
 margin-bottom: 24px;
 }
 
 .qr-code {
 width: min(220px, 70vw);
 height: min(220px, 70vw);
 border-radius: 16px;
 box-shadow:
 0 8px 32px var(--rgba-black-12),
        0 4px 16px var(--rgba-black-06);
 margin: 0 auto 16px;
 border: 2px solid var(--border-light);
 }
 
 .scan-instruction {
 font-size: clamp(0.85rem, 2.5vw, 0.9rem);
 padding: 12px 16px;
 margin-top: 8px;
 border-radius: 12px;
 line-height: 1.4;
 }
 
 .address-section {
 margin-bottom: 24px;
 }
 
 .address-section label {
 font-size: clamp(0.95rem, 3vw, 1rem);
 margin-bottom: 12px;
 padding-left: 28px;
 display: block;
 }
 
 .address-container {
 display: flex;
 flex-direction: column;
 gap: 12px;
 }
 
 .wallet-address {
 font-size: clamp(0.8rem, 2.5vw, 0.85rem);
 padding: 16px;
 border-radius: 12px;
 word-break: break-all;
 line-height: 1.4;
 min-height: auto;
 font-family: 'Monaco', 'Consolas', monospace;
 background: var(--gradient-wallet-address);
 border: 1px solid var(--rgba-primary-15);
 transition: all 0.2s ease;
 }
 
 .wallet-address:active {
 background: var(--gradient-wallet-address-active);
 border-color: var(--rgba-primary-25);
 }
 
 .copy-address-btn {
 width: 100%;
 padding: 16px;
 font-size: clamp(0.9rem, 2.5vw, 0.95rem);
 border-radius: 12px;
 min-height: 52px;
 background: var(--gradient-primary);
 color: white;
 border: none;
 transition: all 0.2s ease;
 font-weight: 600;
 box-shadow:
 0 6px 20px var(--rgba-primary-25),
    0 2px 8px var(--rgba-primary-15);
 }
 
 .copy-address-btn:active {
 transform: scale(0.98);
 background: var(--gradient-primary-dark);
 }
 
 .amount-reminder {
 margin-top: 20px;
 }
 
 .reminder-box {
 padding: 16px;
 border-radius: 12px;
 font-size: clamp(0.85rem, 2.5vw, 0.9rem);
 line-height: 1.4;
 }
 
 .copy-amount-section {
 gap: 10px;
 margin-top: 12px;
 padding: 12px;
 flex-direction: column;
 border-radius: 10px;
 }
 
 .amount-to-copy {
 font-size: clamp(0.95rem, 3vw, 1rem);
 padding: 10px 14px;
 width: 100%;
 text-align: center;
 border-radius: 8px;
 }
 
 .copy-amount-btn {
 padding: 12px 18px;
 font-size: clamp(0.85rem, 2.5vw, 0.9rem);
 min-width: 100%;
 border-radius: 10px;
 min-height: 44px;
 }
 
 .timer-section {
 padding: 16px;
 margin-bottom: 20px;
 border-radius: 12px;
 font-size: clamp(0.9rem, 2.5vw, 0.95rem);
 }
 
 .countdown-timer {
 font-size: clamp(1rem, 3vw, 1.1rem);
 font-weight: 700;
 }
 
 .modal-overlay .modal-footer,
 .crypto-donation-modal .modal-footer,
 .modal-footer {
 flex-direction: column;
 gap: 12px;
 padding: 20px 20px 24px;
 background: var(--gradient-modal-footer);
 border-radius: 0 0 20px 20px;
 border-top: 1px solid var(--rgba-gray-30);
 }
 
 .verify-payment-btn, .share-btn {
 padding: 16px 20px;
 font-size: 15px;
 min-height: 56px;
 border-radius: 14px;
 }
 
 /* Manual Report Button - Mobile Responsive with Higher Specificity */
 .modal-overlay .modal-content .modal-footer .manual-report-btn[style],
 .crypto-donation-container .modal-overlay .modal-content .modal-footer .manual-report-btn,
 div.modal-overlay div.modal-content div.modal-footer button.manual-report-btn,
 .modal-footer button.manual-report-btn[style*="margin-top"] {
 margin-top: 0;
 padding: 16px 20px;
 font-size: 15px;
 min-height: 56px;
 border-radius: 14px;
 width: 100%;
 }
 
 .verify-payment-btn:hover, .share-btn:hover {
 transform: translateY(-1px);
 }
 
 .status-pending {
 padding: 16px 20px;
 font-size: 14px;
 border-radius: 12px;
 }
 
 .status-pending i {
 font-size: 16px;
 padding: 6px;
 }
 
 .verify-payment-btn, .share-btn {
 width: 100%;
 padding: 16px;
 font-size: clamp(0.9rem, 2.5vw, 0.95rem);
 border-radius: 12px;
 min-height: 52px;
 transition: all 0.2s ease;
 font-weight: 600;
 border: none;
 cursor: pointer;
 box-shadow:
 0 6px 20px var(--rgba-success-25),
        0 2px 8px var(--rgba-success-15);
 }
 
 /* Manual Report Button - Mobile Responsive (smaller screens) with Higher Specificity */
 .modal-overlay .modal-content .modal-footer .manual-report-btn[style],
 .crypto-donation-container .modal-overlay .modal-content .modal-footer .manual-report-btn,
 div.modal-overlay div.modal-content div.modal-footer button.manual-report-btn,
 .modal-footer button.manual-report-btn[style*="margin-top"] {
 margin-top: 0;
 width: 100%;
 padding: 16px;
 font-size: clamp(0.9rem, 2.5vw, 0.95rem);
 border-radius: 12px;
 min-height: 52px;
 }
 
 .verify-payment-btn:active, .share-btn:active {
 transform: scale(0.98);
 }
 
 .transaction-status {
 /*padding: 16px;*/
 margin-bottom: 20px;
 border-radius: 12px;
 font-size: clamp(0.9rem, 2.5vw, 0.95rem);
 }
 
 .status-pending {
 gap: 10px;
 justify-content: center;
 align-items: center;
 }
 
 /* Success Modal */
 .success-modal {
 text-align: center;
 overflow: hidden;
 }
 
 .success-animation {
 padding: 32px 20px;
 border-radius: 20px 20px 0 0;
 }
 
 .success-animation i {
 font-size: clamp(3.5rem, 12vw, 4.5rem);
 }
 
 .success-modal h3 {
 padding: 20px 20px 0;
 font-size: clamp(1.8rem, 6vw, 2.2rem);
 line-height: 1.1;
 }
 

 
 .transaction-details {
 margin: 0 20px 20px;
 padding: 20px;
 border-radius: 14px;
 }
 
 .transaction-details p {
 margin: 6px 0;
 padding: 0;
 font-size: clamp(0.85rem, 2.5vw, 0.9rem);
 line-height: 1.3;
 }
 
 .success-actions {
 padding: 20px;
 flex-direction: column;
 gap: 12px;
 }
 
 /* Mobile button styles handled by main button definitions above */
 
 /* Notifications */
 .notification-container {
 top: 16px;
 right: 16px;
 left: 16px;
 width: auto;
 z-index: var(--z-notification);
 }
 
 .notification {
 padding: 16px 20px;
 font-size: clamp(0.9rem, 2.5vw, 0.95rem);
 border-radius: 12px;
 margin-bottom: 12px;
 box-shadow:
 0 8px 32px var(--rgba-black-15),
        0 4px 16px var(--rgba-black-08);
 max-width: none;
 gap: 12px;
 border-left-width: 3px;
 }
 
 .notification i {
 font-size: clamp(1.2rem, 3.5vw, 1.3rem);
 flex-shrink: 0;
 }

 /* Enhanced touch interactions for mobile */
 .summary-badge:active {
 transform: scale(0.98);
 transition: transform 0.1s ease;
 }
}



}

/* ========== frontend\container-queries.css ========== */
/* ===============================================
   CONTAINER QUERIES - MODERN RESPONSIVE DESIGN
   Component-based responsive design using container queries
   Uses unified tokens from shared/tokens.css
   =============================================== */

/* tokens.css imported globally via main.css */

/* ===============================================
   CONTAINER QUERY SETUP
   =============================================== */

/* Main widget container */
.crypto-donation-widget {
  container-type: inline-size;
  container-name: widget;
}

/* Modal container */
.modal-content {
  container-type: inline-size;
  container-name: modal;
}

/* Donation form container */
.donation-form {
  container-type: inline-size;
  container-name: form;
}

/* Button group container */
.crypto-buttons {
  container-type: inline-size;
  container-name: buttons;
}

/* Summary container */
.donation-summary {
  container-type: inline-size;
  container-name: summary;
}

/* ===============================================
   WIDGET CONTAINER QUERIES
   =============================================== */

/* Small widget (< 400px) */
@container widget (max-width: 400px) {
  .crypto-donation-widget {
    padding: var(--space-sm);
    border-radius: var(--radius-md);
  }
  
  .donation-title {
    font-size: clamp(1.1rem, 4vw, 1.25rem);
    margin-bottom: var(--space-sm);
  }
  
  .crypto-buttons {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
  
  .crypto-button {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
  }
}

/* Medium widget (400px - 600px) */
@container widget (min-width: 400px) and (max-width: 600px) {
  .crypto-donation-widget {
    padding: var(--space-md);
  }
  
  .crypto-buttons {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
  
  .donation-amount-input {
    max-width: 200px;
  }
}

/* Large widget (> 600px) */
@container widget (min-width: 600px) {
  .crypto-buttons {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
  
  .donation-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: start;
  }
}

/* ===============================================
   MODAL CONTAINER QUERIES
   =============================================== */

/* Small modal (< 500px) */
@container modal (max-width: 500px) {
  .modal-content {
    padding: var(--space-md);
    margin: var(--space-sm);
  }
  
  .qr-code-container {
    width: 200px;
    height: 200px;
  }
  
  .modal-title {
    font-size: 1.25rem;
  }
  
  .modal-buttons {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  /* Preserve modal section layouts in small modals */
  .wallet-section {
    margin-bottom: 24px;
  }
  
  .wallet-address-container {
    border-radius: 14px;
  }
  
  .wallet-header {
    padding: 14px 18px 10px;
    font-size: 14px;
  }
  
  .wallet-input-row {
    padding: 16px;
  }
  
  html body .wallet-address-input:not([type="button"]):not([type="submit"]) {
    font-size: 13px;
    padding: 14px 16px;
  }
  
  .copy-wallet-btn {
    padding: 14px 18px;
    font-size: 13px;
    min-width: 90px;
  }
  
  .qr-section {
    margin-bottom: 24px;
  }
  
  .amount-reminder {
    margin-bottom: 0;
  }
  
  .payment-timer {
    margin-top: 0;
  }
}

/* Large modal (> 500px) */
@container modal (min-width: 500px) {
  .modal-content {
    padding: var(--space-lg);
  }
  
  .qr-code-container {
    width: 280px;
    height: 280px;
  }
  
  /* Remove grid layout that forces column display */
  .modal-body {
    display: block;
  }
  
  /* Only apply grid to specific QR + info layouts if needed */
  .modal-body.qr-info-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-lg);
    align-items: center;
  }
  
  /* Preserve modal section layouts in large modals */
  .wallet-section {
    margin-bottom: 24px;
  }
  
  .wallet-address-container {
    border-radius: var(--modal-input-radius);
  }
  
  .wallet-header {
    padding: 16px 20px 12px;
    font-size: var(--modal-input-size);
  }
  
  .wallet-input-row {
    padding: 16px;
  }
  
  html body .wallet-address-input:not([type="button"]):not([type="submit"]) {
    font-size: var(--modal-input-size);
    padding: 16px;
  }
  
  .copy-wallet-btn {
    padding: 16px 20px;
    font-size: var(--modal-input-size);
  }
  
  .qr-section {
    margin-bottom: 24px;
  }
  
  .amount-reminder {
    margin-bottom: 0px;
  }
  
  .payment-timer {
    margin-top: 0px;
  }
}

/* ===============================================
   BUTTON CONTAINER QUERIES
   =============================================== */

/* Compact button layout */
@container buttons (max-width: 300px) {
  .crypto-buttons {
    grid-template-columns: 1fr;
  }
  
  .crypto-button {
    justify-content: center;
    text-align: center;
  }
  
  .crypto-button .crypto-icon {
    margin-right: var(--space-xs);
  }
}

/* Standard button layout */
@container buttons (min-width: 300px) and (max-width: 500px) {
  .crypto-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Wide button layout */
@container buttons (min-width: 500px) {
  .crypto-buttons {
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-xs), 1fr));
  }
}

/* ===============================================
   SUMMARY CONTAINER QUERIES
   =============================================== */

/* Compact summary */
@container summary (max-width: 350px) {
  .summary-badge {
    flex-direction: column;
    text-align: center;
    gap: var(--space-xs);
  }
  
  .summary-amount {
    font-size: 1.1rem;
  }
}

/* Standard summary */
@container summary (min-width: 350px) {
  .summary-badge {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ===============================================
   FORM CONTAINER QUERIES
   =============================================== */

/* Compact form */
@container form (max-width: 400px) {
  .donation-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  
  .form-row {
    flex-direction: column;
  }
  
  .donation-amount-input {
    width: 100%;
  }
}

/* Wide form */
@container form (min-width: 400px) {
  .form-row {
    display: flex;
    gap: var(--space-md);
    align-items: center;
  }
  
  .donation-amount-input {
    flex: 1;
    max-width: 200px;
  }
}

/* ===============================================
   FALLBACK FOR BROWSERS WITHOUT CONTAINER QUERY SUPPORT
   =============================================== */

@supports not (container-type: inline-size) {
  /* Fallback to media queries for older browsers */
  @media (max-width: 400px) {
    .crypto-buttons {
      grid-template-columns: 1fr;
    }
    
    .modal-content {
      margin: var(--space-sm);
      padding: var(--space-md);
    }
  }
  
  @media (min-width: 400px) and (max-width: 600px) {
    .crypto-buttons {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (min-width: 600px) {
    .crypto-buttons {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

/* ========== frontend\layout-safety.css ========== */
/* ===============================================
   LAYOUT SAFETY & WORDPRESS COMPATIBILITY
   Uses unified tokens from shared/tokens.css
   =============================================== */

/* tokens.css imported globally via main.css */

/* ===========================================
 12. LAYOUT SAFETY & PERFORMANCE
 =========================================== */

/* Clean flexible layout for carousel containers */
body .crypto-donation-container .carousel-wrapper,
body .crypto-donation-container .carousel-slide,
html body .crypto-donation-container .carousel-wrapper,
html body .crypto-donation-container .carousel-slide,
.wp-content .crypto-donation-container .carousel-wrapper,
.wp-content .crypto-donation-container .carousel-slide,
.site-content .crypto-donation-container .carousel-wrapper,
.site-content .crypto-donation-container .carousel-slide,
.crypto-donation-container .carousel-wrapper,
.crypto-donation-container .carousel-slide {
 min-height: fit-content;
}

/* Ensure smooth centering and viewport behavior */
body .crypto-donation-container .carousel-container,
html body .crypto-donation-container .carousel-container,
.wp-content .crypto-donation-container .carousel-container,
.site-content .crypto-donation-container .carousel-container,
.crypto-donation-container .carousel-container {
 scroll-behavior: smooth;
 height: auto;
 transition: height 0.25s ease-out;
 min-height: 500px; /* Force minimum height to prevent collapse */
 max-height: none;
}

/* Enhanced slide content for flexible height */
body .crypto-donation-container .slide-content,
html body .crypto-donation-container .slide-content,
.wp-content .crypto-donation-container .slide-content,
.site-content .crypto-donation-container .slide-content,
.crypto-donation-container .slide-content {
 display: flex;
 flex-direction: column;
 gap: 24px;
 justify-content: flex-start;
 position: relative;
 padding: 20px 0;
 min-height: fit-content;
}

/* .crypto-donation-container base styles moved to core.css to avoid duplication */

.crypto-donation-container *::before,
.crypto-donation-container *::after {
 pointer-events: none;
 user-select: none;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
}

/* Button styles consolidated in amount-selection.css and core.css for better organization */

body .crypto-donation-container .modal-close,
html body .crypto-donation-container .modal-close,
.wp-content .crypto-donation-container .modal-close,
.site-content .crypto-donation-container .modal-close,
.crypto-donation-container .modal-close {
 z-index: var(--z-modal);
 position: absolute;
}

body .crypto-donation-container .step-circle.completing,
html body .crypto-donation-container .step-circle.completing,
.wp-content .crypto-donation-container .step-circle.completing,
.site-content .crypto-donation-container .step-circle.completing,
.crypto-donation-container .step-circle.completing {
 transform: scale(1.2);
 transition: transform 0.15s ease;
}

body .crypto-donation-container .step-circle.completed,
html body .crypto-donation-container .step-circle.completed,
.wp-content .crypto-donation-container .step-circle.completed,
.site-content .crypto-donation-container .step-circle.completed,
.crypto-donation-container .step-circle.completed {
 transform: scale(1.1);
}

body .crypto-donation-container .step-check.visible,
html body .crypto-donation-container .step-check.visible,
.wp-content .crypto-donation-container .step-check.visible,
.site-content .crypto-donation-container .step-check.visible,
.crypto-donation-container .step-check.visible {
 transform: translate(-50%, -50%) scale(1); opacity: 1;
}

body .crypto-donation-container .step-circle.active-pulse,
html body .crypto-donation-container .step-circle.active-pulse,
.wp-content .crypto-donation-container .step-circle.active-pulse,
.site-content .crypto-donation-container .step-circle.active-pulse,
.crypto-donation-container .step-circle.active-pulse {
 animation: activePulse 2s infinite;
}

body .crypto-donation-container .carousel-slide.slide-entrance,
html body .crypto-donation-container .carousel-slide.slide-entrance,
.wp-content .crypto-donation-container .carousel-slide.slide-entrance,
.site-content .crypto-donation-container .carousel-slide.slide-entrance,
.crypto-donation-container .carousel-slide.slide-entrance {
 animation: slideInScaleCenter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Enhanced slide entrance animation with centering */
/* slideInScaleCenter moved to animations.css to avoid duplication */

/* Mobile-optimized animations for layout safety */
@media (max-width: 768px) {
 .crypto-donation-container .carousel-slide.slide-entrance {
  animation: slideInScaleCenterMobile 0.3s ease-out;
 }
}

@media (max-width: 480px) {
 .crypto-donation-container .carousel-slide.slide-entrance {
  animation: slideInScaleCenterMobile 0.2s ease-out;
 }
}



/* ========== frontend\animations.css ========== */
/* ===============================================
   ANIMATIONS & TRANSITIONS
   Uses unified tokens from shared/tokens.css
   =============================================== */

/* tokens.css imported globally via main.css */

/* ===============================================
 ACCESSIBILITY: REDUCED MOTION SUPPORT
 =============================================== */

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Preserve essential animations but make them instant */
  .modal-overlay,
  .notification,
  .success-modal {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===============================================
 OPTIMIZED ANIMATION KEYFRAMES
 =============================================== */

/* Rotation & Movement */
/* rotateSmooth moved to core.css to avoid duplication */

@keyframes slideInScaleCenter {
 0% { opacity: 0; transform: translateX(30px) scale(0.95) translateY(20px); filter: blur(4px); }
 60% { opacity: 0.8; transform: translateX(-5px) scale(1.02) translateY(-5px); filter: blur(1px); }
 100% { opacity: 1; transform: translateX(0) scale(1) translateY(0); filter: blur(0); }
}

/* Simplified mobile-optimized slide animation */
@keyframes slideInScaleCenterMobile {
 0% { opacity: 0; transform: translateY(15px) scale(0.98); }
 100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Pulse Effects */
@keyframes activePulse {
 0%, 100% { box-shadow: 0 0 0 0 var(--rgba-primary-40); }
  50% { box-shadow: 0 0 0 10px var(--rgba-primary-00); }
}

/* warningPulse moved to modals.css to avoid duplication */

/* Success & Shimmer Effects */
/* successBounce moved to modals.css to avoid duplication */

@keyframes iconShimmer {
 0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 0; }
 50% { transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 1; }
}

/* successShimmer moved to modals.css to avoid duplication */

/* notificationSlideIn moved to notifications.css to avoid duplication */

/* notificationShimmer moved to notifications.css to avoid duplication */

@keyframes modalOverlayFadeIn {
 from { 
 opacity: 0;
 backdrop-filter: blur(0) saturate(100%);
 -webkit-backdrop-filter: blur(0) saturate(100%);
 }
 to { 
 opacity: 1;
 backdrop-filter: blur(24px) saturate(180%);
 -webkit-backdrop-filter: blur(24px) saturate(180%);
 }
}

@keyframes modalSlideIn {
 from { 
 transform: scale(0.85) translateY(32px) rotateX(10deg);
 opacity: 0;
 filter: blur(8px);
 }
 60% { 
 transform: scale(1.02) translateY(-4px) rotateX(-2deg);
 opacity: 0.9;
 filter: blur(2px);
 }
 to { 
 transform: scale(1) translateY(0) rotateX(0deg);
 opacity: 1;
 filter: blur(0);
 }
}

/* Simplified mobile-optimized modal animation */
@keyframes modalSlideInMobile {
 from { 
 transform: translateY(20px) scale(0.95);
 opacity: 0;
 }
 to { 
 transform: translateY(0) scale(1);
 opacity: 1;
 }
}

/* slideUpAndScale moved to core.css to avoid duplication */

@keyframes activeStepPulse {
 0%, 100% { 
 transform: translateY(-4px) scale(1.08);
 filter: drop-shadow(0 8px 16px var(--rgba-primary-25));
 }
 50% { 
 transform: translateY(-6px) scale(1.12);
 filter: drop-shadow(0 12px 24px var(--rgba-primary-35));
 }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}





/* ========== shared\performance-optimizations.css ========== */
/* Performance Optimizations - GPU Acceleration & Layout Optimization */

/* GPU Acceleration for Modal Components */
.modal-content {
    backface-visibility: hidden;
}

/* GPU Acceleration for Form Elements */
.manual-report-form-group select,
.manual-report-submit,
.input-group {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* GPU Acceleration for Buttons */
.crypto-button,
.cdc-crypto-button-widget,
.amount-btn,
.copy-button {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* GPU Acceleration for Notifications */
.notification {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* GPU Acceleration for Grid Layouts */
.crypto-grid,
.donation-grid,
.grid-auto-fit,
.grid-auto-fit-sm,
.grid-auto-fit-lg {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* GPU Acceleration for QR Code Components */
.qr-code-container,
.qr-code {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* GPU Acceleration for Progress Elements */
.progress-step-mini,
.progress-line,
.inline-progress-bar {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* GPU Acceleration for Wallet Components */
.wallet-section,
.wallet-address-container {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* GPU Acceleration for Table Elements */
.detail-row,
.donation-stats,
.verification-stats {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* Optimize Modal Overlay Performance */
.modal-overlay {
    backface-visibility: hidden;
}

/* Performance hint for elements that will change */
.crypto-button:hover,
.amount-btn:hover,
.copy-button:hover {
    will-change: transform, box-shadow;
}

.notification.show,
.modal-content.show {
    will-change: transform, opacity;
}

/* Reset will-change after animations */
.crypto-button,
.amount-btn,
.copy-button,
.notification,
.modal-content {
    will-change: auto;
}

/* ========== frontend\skip-links.css ========== */
/* ===============================================
   SKIP LINKS - ACCESSIBILITY NAVIGATION
   Provides keyboard navigation shortcuts
   =============================================== */

/* tokens.css imported globally via main.css */

/* ===============================================
   SKIP LINK CONTAINER
   Hidden by default, shown on focus
   =============================================== */

.skip-links {
  position: absolute;
  top: -40px;
  left: 6px;
  z-index: 999999;
  background: var(--surface-primary);
  border: 2px solid var(--primary-500);
  border-radius: var(--radius-md);
  padding: var(--space-xs);
  box-shadow: var(--shadow-lg);
  transform: translateY(-100%);
  transition: transform 0.2s ease-in-out;
}

.skip-links:focus-within {
  transform: translateY(0);
  top: 6px;
}

/* ===============================================
   SKIP LINK ITEMS
   Individual skip link styling
   =============================================== */

.skip-link {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  margin-inline-end: var(--space-xs);
  background: var(--primary-500);
  color: var(--surface-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
}

.skip-link:hover,
.skip-link:focus {
  background: var(--primary-600);
  color: var(--surface-primary);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--rgba-black-20);
}

.skip-link:focus {
  outline: 2px solid var(--surface-primary);
  outline-offset: 2px;
}

.skip-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px var(--rgba-black-20);
}

/* ===============================================
   SKIP LINK TARGETS
   Ensure target elements are focusable
   =============================================== */

.skip-target {
  outline: none;
  position: relative;
}

.skip-target:focus {
  outline: 3px solid var(--primary-500);
  outline-offset: 2px;
}

/* Add focus indicator for skip targets */
.skip-target:focus::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px dashed var(--primary-500);
  border-radius: var(--radius-md);
  pointer-events: none;
  animation: skip-target-pulse 2s ease-in-out;
}

@keyframes skip-target-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

/* ===============================================
   RESPONSIVE DESIGN
   Adapt skip links for different screen sizes
   =============================================== */

@media (max-width: 768px) {
  .skip-links {
    left: 4px;
    right: 4px;
    width: auto;
  }
  
  .skip-link {
    display: block;
    margin-bottom: var(--space-xs);
    margin-inline-end: 0;
    text-align: center;
  }
  
  .skip-link:last-child {
    margin-bottom: 0;
  }
}

/* ===============================================
   HIGH CONTRAST SUPPORT
   Enhanced visibility for high contrast mode
   =============================================== */

@media (prefers-contrast: high) {
  .skip-links {
    border-width: 3px;
    box-shadow: 0 0 0 1px var(--text-primary);
  }
  
  .skip-link {
    border: 2px solid var(--text-primary);
    font-weight: 700;
  }
  
  .skip-link:focus {
    outline-width: 3px;
    outline-color: var(--text-primary);
  }
  
  .skip-target:focus {
    outline-width: 4px;
  }
}

/* ===============================================
   REDUCED MOTION SUPPORT
   Disable animations for users who prefer reduced motion
   =============================================== */

@media (prefers-reduced-motion: reduce) {
  .skip-links,
  .skip-link,
  .skip-target:focus::before {
    transition: none;
    animation: none;
  }
  
  .skip-link:hover,
  .skip-link:focus {
    transform: none;
  }
  
  .skip-link:active {
    transform: none;
  }
}

/* ===============================================
   DARK MODE SUPPORT
   Adapt colors for dark mode
   =============================================== */

@media (prefers-color-scheme: dark) {
  .skip-links {
    background: var(--surface-secondary);
    border-color: var(--primary-400);
  }
  
  .skip-link {
    background: var(--primary-400);
    color: var(--text-primary);
  }
  
  .skip-link:hover,
  .skip-link:focus {
    background: var(--primary-300);
    color: var(--text-primary);
  }
  
  .skip-link:focus {
    outline-color: var(--text-primary);
  }
  
  .skip-target:focus {
    outline-color: var(--primary-400);
  }
  
  .skip-target:focus::before {
    border-color: var(--primary-400);
  }
}

/* ===============================================
   PRINT STYLES
   Hide skip links in print
   =============================================== */

@media print {
  .skip-links {
    display: none;
  }
}

/* ===============================================
   USAGE EXAMPLES
   How to implement skip links in HTML
   =============================================== */

/*
HTML Structure:

<div class="skip-links" role="navigation" aria-label="Skip links">
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <a href="#donation-form" class="skip-link">Skip to donation form</a>
  <a href="#crypto-options" class="skip-link">Skip to crypto options</a>
  <a href="#footer" class="skip-link">Skip to footer</a>
</div>

<main id="main-content" class="skip-target" tabindex="-1">
  <!-- Main content -->
</main>

<form id="donation-form" class="skip-target" tabindex="-1">
  <!-- Donation form -->
</form>

<div id="crypto-options" class="skip-target" tabindex="-1">
  <!-- Crypto options -->
</div>

<footer id="footer" class="skip-target" tabindex="-1">
  <!-- Footer content -->
</footer>

JavaScript Enhancement:

// Focus management for skip links
document.querySelectorAll('.skip-link').forEach(link => {
  link.addEventListener('click', (e) => {
    const target = document.querySelector(link.getAttribute('href'));
    if (target) {
      target.focus();
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  });
});
*/

/* ========== frontend\contrast-improvements.css ========== */
/* ===============================================
   COLOR CONTRAST IMPROVEMENTS - WCAG AA COMPLIANCE
   Addresses color contrast issues for accessibility
   Uses CSS layers for proper cascade management
   =============================================== */

/* tokens.css imported globally via main.css */

/* Use contrast layer for better specificity management */
@layer contrast-improvements {

/* ===============================================
   IMPROVED TEXT CONTRAST
   Ensures minimum 4.5:1 contrast ratio for normal text
   and 3:1 for large text (18px+ or 14px+ bold)
   =============================================== */

/* Override low-contrast text colors */
.text-secondary {
  color: var(--gray-700); /* Improved from gray-600 */
}

.text-tertiary {
  color: var(--gray-600); /* Improved from gray-500 */
}

.text-muted {
  color: var(--gray-600); /* Improved from gray-500 */
}

/* Improve contrast for crypto button text */
.crypto-btn {
  color: var(--gray-800);
}

.crypto-btn .crypto-name {
  color: var(--gray-800);
}

.crypto-btn .crypto-symbol {
  color: var(--gray-700);
}

/* ===============================================
   IMPROVED BUTTON CONTRAST
   Ensures buttons meet accessibility standards
   =============================================== */

/* Primary buttons - ensure sufficient contrast */
.btn-primary,
.crypto-btn.selected {
  background: var(--primary-600);
  color: var(--surface-primary);
}

.btn-primary:hover,
.crypto-btn.selected:hover {
  background: var(--primary-700);
}

/* Secondary buttons - improve contrast */
.btn-secondary {
  background: var(--gray-100);
  color: var(--gray-800);
  border: 2px solid var(--gray-400);
}

.btn-secondary:hover {
  background: var(--gray-200);
  color: var(--gray-900);
  border-color: var(--gray-500);
}

/* Success buttons - maintain good contrast */
.btn-success {
  background: var(--success-600);
  color: var(--surface-primary);
}

.btn-success:hover {
  background: var(--success-700);
}

/* ===============================================
   IMPROVED FORM ELEMENT CONTRAST
   Better visibility for form inputs and labels
   =============================================== */

/* Form inputs - improve border and text contrast */
html body .form-input:not([type="button"]):not([type="submit"]),
html body .manual-report-form-group input:not([type="button"]):not([type="submit"]),
html body .manual-report-form-group select,
html body .manual-report-form-group textarea {
  border: 2px solid var(--gray-300);
  color: var(--text-primary);
  background: var(--surface-primary);
  font-size: 15px;
  line-height: 1.5;
}

/* Specific fix for wallet address inputs in modals - higher specificity without !important */
html body .modal-overlay .manual-report-form-group input[name="wallet_address"]:not([type="button"]):not([type="submit"]),
html body .modal-overlay .manual-report-form-group #manual-wallet-address:not([type="button"]):not([type="submit"]),
html body .crypto-donation-modal .manual-report-form-group input[name="wallet_address"]:not([type="button"]):not([type="submit"]),
html body .crypto-donation-modal .manual-report-form-group #manual-wallet-address:not([type="button"]):not([type="submit"]),
html body .modal-overlay .manual-report-form-group input[type="text"]#manual-wallet-address:not([type="button"]):not([type="submit"]),
html body .crypto-donation-modal .manual-report-form-group input[type="text"]#manual-wallet-address:not([type="button"]):not([type="submit"]) {
  background: var(--rgba-white-98);
  color: var(--gray-800);
  backdrop-filter: none;
}

html body .form-input:not([type="button"]):not([type="submit"]):focus,
html body .manual-report-form-group input:not([type="button"]):not([type="submit"]):focus,
html body .manual-report-form-group select:focus,
html body .manual-report-form-group textarea:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--rgba-primary-15), 0 2px 8px var(--rgba-primary-10), inset 0 1px 2px var(--rgba-gray-05);
  background: var(--surface-modal);
}

/* Form labels - ensure readability */
.form-label,
.manual-report-form-group label {
  color: var(--gray-800);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* Placeholder text - improve contrast */
html body .form-input:not([type="button"]):not([type="submit"])::placeholder,
html body .manual-report-form-group input:not([type="button"]):not([type="submit"])::placeholder,
html body .manual-report-form-group textarea::placeholder {
  color: var(--gray-500);
  opacity: 1;
  font-style: italic;
}

/* ===============================================
   IMPROVED MODAL CONTRAST
   Better visibility for modal content
   =============================================== */

/* Modal headers - ensure title readability */
.modal-title {
  color: var(--gray-900);
  font-weight: 700;
}

/* Modal body text - improve readability */
.modal-body {
  color: var(--gray-800);
}

.modal-body .text-secondary {
  color: var(--gray-700);
}

/* Modal close button - improve visibility */
.modal-close {
  background: var(--gray-100);
  color: var(--gray-800);
  border: 2px solid var(--gray-400);
}

.modal-close:hover {
  background: var(--gray-200);
  color: var(--gray-900);
  border-color: var(--gray-500);
}

/* ===============================================
   IMPROVED STATUS INDICATORS
   Better contrast for success, error, warning states
   =============================================== */

/* Success indicators */
.status-success,
.notification-success {
  background: var(--success-50);
  color: var(--success-800);
  border: 2px solid var(--success-300);
}

/* Error indicators */
.status-error,
.notification-error {
  background: var(--error-50);
  color: var(--error-800);
  border: 2px solid var(--error-300);
}

/* Warning indicators */
.status-warning,
.notification-warning {
  background: var(--warning-50);
  color: var(--warning-800);
  border: 2px solid var(--warning-300);
}

/* ===============================================
   IMPROVED LINK CONTRAST
   Better visibility for interactive elements
   =============================================== */

/* Links - ensure sufficient contrast */
a,
.link {
  color: var(--primary-700);
  text-decoration: underline;
}

a:hover,
.link:hover {
  color: var(--primary-800);
  text-decoration: underline;
}

a:focus,
.link:focus {
  outline: 3px solid var(--primary-600);
  outline-offset: 2px;
  background: var(--primary-50);
}

/* ===============================================
   IMPROVED CRYPTO CURRENCY COLORS
   Better contrast for cryptocurrency indicators
   =============================================== */

/* Bitcoin - improve contrast */
.crypto-btn[data-crypto="bitcoin"] {
  background: #fff5e6;
  border: 2px solid #d97706;
}

.crypto-btn[data-crypto="bitcoin"] .crypto-name {
  color: #92400e;
}

.crypto-btn[data-crypto="bitcoin"] .crypto-symbol {
  color: #b45309;
}

/* Ethereum - improve contrast */
.crypto-btn[data-crypto="ethereum"] {
  background: #eff6ff;
  border: 2px solid #2563eb;
}

.crypto-btn[data-crypto="ethereum"] .crypto-name {
  color: #1e40af;
}

.crypto-btn[data-crypto="ethereum"] .crypto-symbol {
  color: #1d4ed8;
}

/* Tether - improve contrast */
.crypto-btn[data-crypto="usdt"] {
  background: #ecfdf5;
  border: 2px solid #059669;
}

.crypto-btn[data-crypto="usdt"] .crypto-name {
  color: #047857;
}

.crypto-btn[data-crypto="usdt"] .crypto-symbol {
  color: #065f46;
}

/* Litecoin - improve contrast */
.crypto-btn[data-crypto="litecoin"] {
  background: var(--surface-primary);
  border: 2px solid var(--border-secondary);
}

.crypto-btn[data-crypto="litecoin"] .crypto-name {
  color: var(--text-secondary);
}

.crypto-btn[data-crypto="litecoin"] .crypto-symbol {
  color: var(--text-primary);
}

/* Binance - improve contrast */
.crypto-btn[data-crypto="binance"] {
  background: #fffbeb;
  border: 2px solid #d97706;
}

.crypto-btn[data-crypto="binance"] .crypto-name {
  color: #92400e;
}

.crypto-btn[data-crypto="binance"] .crypto-symbol {
  color: #b45309;
}

/* ===============================================
   IMPROVED AMOUNT DISPLAY CONTRAST
   Better visibility for monetary amounts
   =============================================== */

.amount-display,
.donation-amount,
.crypto-amount {
  color: var(--gray-900);
  font-weight: 700;
}

.amount-currency,
.crypto-symbol-display {
  color: var(--gray-700);
  font-weight: 600;
}

} /* End contrast-improvements layer */

/* ===============================================
   HIGH CONTRAST MODE ENHANCEMENTS
   Additional improvements for high contrast preference
   These use !important for accessibility overrides
   =============================================== */

@media (prefers-contrast: high) {
  /* Force higher contrast for all text */
  * {
    color: #000000;
  }
  
  /* High contrast backgrounds */
  .crypto-donation-widget {
    background: #ffffff;
    border: 3px solid #000000;
  }
  
  /* High contrast buttons */
  .btn-primary {
    background: #000000;
    color: #ffffff;
    border: 3px solid #000000;
  }
  
  .btn-secondary {
    background: #ffffff;
    color: #000000;
    border: 3px solid #000000;
  }
  
  /* High contrast form elements */
  html body .form-input:not([type="button"]):not([type="submit"]),
  html body .manual-report-form-group input:not([type="button"]):not([type="submit"]),
  html body .manual-report-form-group select,
  html body .manual-report-form-group textarea {
    background: #ffffff;
    color: #000000;
    border: 3px solid #000000;
  }
  
  /* High contrast crypto buttons */
  .crypto-btn {
    background: #ffffff;
    color: #000000;
    border: 3px solid #000000;
  }
  
  .crypto-btn.selected {
    background: #000000;
    color: #ffffff;
  }
  
  /* High contrast links */
  a, .link {
    color: #0000ff;
    text-decoration: underline;
    font-weight: 700;
  }
  
  a:visited, .link:visited {
    color: #800080;
  }
}

/* ===============================================
   LIGHT MODE FORM IMPROVEMENTS
   Ensure proper light backgrounds in light mode
   =============================================== */

/* Explicit light mode form styling */
@media (prefers-color-scheme: light) {
  html body .form-input:not([type="button"]):not([type="submit"]),
  html body .manual-report-form-group input:not([type="button"]):not([type="submit"]),
  html body .manual-report-form-group select,
  html body .manual-report-form-group textarea {
    background: var(--surface-primary, #ffffff);
    color: var(--text-primary, #1f2937);
    border-color: var(--border-light, #d1d5db);
  }
}

/* ===============================================
   DARK MODE CONTRAST IMPROVEMENTS
   Better contrast ratios for dark mode
   =============================================== */

@media (prefers-color-scheme: dark) {
  /* Improve text contrast in dark mode */
  .text-secondary {
    color: var(--gray-300);
  }
  
  .text-tertiary {
    color: var(--gray-400);
  }
  
  /* Improve button contrast in dark mode */
  .btn-primary {
    background: var(--primary-500);
    color: var(--gray-900);
  }
  
  .btn-secondary {
    background: var(--gray-700);
    color: var(--gray-100);
    border-color: var(--gray-500);
  }
  
  /* Improve form element contrast in dark mode */
  html body .form-input:not([type="button"]):not([type="submit"]),
  html body .manual-report-form-group input:not([type="button"]):not([type="submit"]),
  html body .manual-report-form-group select,
  html body .manual-report-form-group textarea {
    background: var(--surface-secondary);
    color: var(--text-primary);
    border-color: var(--border-primary);
  }
  
  /* Improve crypto button contrast in dark mode */
  .crypto-btn {
    background: var(--surface-secondary);
    color: var(--text-primary);
    border-color: var(--border-primary);
  }
  
  .crypto-btn.selected {
    background: var(--primary-600);
    color: var(--gray-100);
  }
}

/* ===============================================
   PRINT CONTRAST IMPROVEMENTS
   Ensure good contrast when printed
   =============================================== */

@media print {
  /* Force black text on white background for print - scoped to plugin elements */
  .crypto-donation-container *,
  .crypto-donation-widget *,
  .crypto-donation-modal *,
  [id*="crypto-donation"] *,
  div.crypto-donation-container * {
    color: #000000 !important;
    background: #ffffff !important;
  }
  
  /* Ensure borders are visible when printed */
  .crypto-btn,
  html body .form-input:not([type="button"]):not([type="submit"]),
  .modal-content {
    border: 2px solid #000000 !important;
  }
  
  /* Make important elements stand out */
  .amount-display,
  .donation-amount,
  .crypto-amount {
    font-weight: 900 !important;
    font-size: 1.2em !important;
  }
}

/* ===============================================
   CONTRAST VALIDATION UTILITIES
   Helper classes for testing contrast ratios
   =============================================== */

/* Test classes for contrast validation */
.contrast-test-aa {
  /* Minimum AA contrast: 4.5:1 for normal text */
  background: #ffffff;
  color: #757575; /* Exactly 4.5:1 ratio */
}

.contrast-test-aaa {
  /* AAA contrast: 7:1 for normal text */
  background: #ffffff;
  color: #595959; /* Exactly 7:1 ratio */
}

.contrast-test-large-aa {
  /* Minimum AA contrast for large text: 3:1 */
  background: #ffffff;
  color: #949494; /* Exactly 3:1 ratio */
  font-size: 18px;
  font-weight: bold;
}

/* ===============================================
   USAGE NOTES
   Guidelines for maintaining good contrast
   =============================================== */

/*
WCAG AA Contrast Requirements:
- Normal text (under 18px): minimum 4.5:1 contrast ratio
- Large text (18px+ or 14px+ bold): minimum 3:1 contrast ratio
- UI components and graphics: minimum 3:1 contrast ratio

WCAG AAA Contrast Requirements:
- Normal text: minimum 7:1 contrast ratio
- Large text: minimum 4.5:1 contrast ratio

Color Combinations to Avoid:
- Light gray text on white backgrounds
- Medium gray text on light backgrounds
- Low contrast brand colors without sufficient adjustment
- Colored text on colored backgrounds without testing

Testing Tools:
- WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
- Colour Contrast Analyser: https://www.tpgi.com/color-contrast-checker/
- Browser DevTools Accessibility Panel

Best Practices:
- Test all color combinations before implementation
- Provide high contrast mode support
- Use semantic colors with sufficient contrast
- Test with actual users who have visual impairments
- Consider color blindness when choosing color schemes
*/

/* ========== frontend\print.css ========== */
/* ===============================================
   PRINT STYLES
   Optimized styles for printing
   =============================================== */

/* tokens.css imported globally via main.css */

/* ===============================================
   PRINT MEDIA QUERIES
   =============================================== */

@media print {
  /* Reset colors for print - scoped to plugin elements */
  .crypto-donation-container *,
  .crypto-donation-widget *,
  .crypto-donation-modal *,
  [id*="crypto-donation"] *,
  div.crypto-donation-container * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* Hide interactive elements */
  .crypto-btn,
  .btn-base,
  button,
  input[type="button"],
  input[type="submit"],
  .modal-overlay,
  .notification,
  .loading-dots,
  .carousel-controls,
  .close-button {
    display: none !important;
  }
  
  /* Optimize layout for print */
  .crypto-donation-widget,
  .modal-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 20px;
    border: 1px solid #000;
    border-radius: 0;
    page-break-inside: avoid;
  }
  
  /* Typography adjustments */
  h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
    page-break-after: avoid;
  }
  
  p, li {
    orphans: 3;
    widows: 3;
  }
  
  /* Show URLs for links */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
  
  /* Hide URL for internal links */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  
  /* QR codes and important info should be visible */
  .qr-code-container,
  .wallet-address,
  .donation-amount,
  .crypto-selection {
    border: 2px solid #000 !important;
    padding: 10px !important;
    margin: 10px 0 !important;
    page-break-inside: avoid;
  }
  
  /* Ensure text is readable */
  .wallet-address {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    word-break: break-all;
  }
  
  /* Page breaks */
  .page-break {
    page-break-before: always;
  }
  
  /* Hide decorative elements */
  .gradient-bg,
  .backdrop-blur,
  .shadow-lg,
  .animation,
  [class*="animate-"] {
    display: none !important;
  }
  
  /* Optimize images */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Print-specific utility classes */
  .print-only {
    display: block !important;
  }
  
  .no-print {
    display: none !important;
  }
  
  /* Table styles for print */
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    border: 1px solid #000;
    padding: 8px;
    text-align: left;
  }
  
  th {
    background: #f0f0f0;
    font-weight: bold;
  }
}

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

/* Classes to control print behavior */
.print-only {
  display: none;
}

.no-print {
  display: block;
}

.page-break-before {
  page-break-before: always;
}

.page-break-after {
  page-break-after: always;
}

.page-break-inside-avoid {
  page-break-inside: avoid;
}

/* Print-friendly donation summary */
@media print {
  .donation-summary-print {
    display: block !important;
    border: 2px solid #000;
    padding: 20px;
    margin: 20px 0;
    background: #f9f9f9;
  }
  
  .donation-summary-print h3 {
    margin-top: 0;
    border-bottom: 1px solid #000;
    padding-bottom: 10px;
  }
  
  .donation-summary-print .amount {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
  }
  
  .donation-summary-print .address {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    word-break: break-all;
    background: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px 0;
  }
}

/* ========== frontend\rtl.css ========== */
/* ===============================================
   RTL (Right-to-Left) SUPPORT
   Uses unified tokens from shared/tokens.css
   =============================================== */

/* tokens.css imported globally via main.css */

/* RTL Styles for Crypdu Donate Plugin - Clean and Minimal */
/* This file is loaded when Arabic or other RTL languages are detected */

/* Base RTL direction for the container */
.crypto-donation-container[dir="rtl"],
.crypto-donation-container.rtl {
    direction: rtl;
    text-align: right;
}

/* CRITICAL: Keep carousel mechanics LTR so JavaScript transforms work correctly */
.crypto-donation-container[dir="rtl"] [data-crypto-widget="carousel-container"],
.crypto-donation-container.rtl [data-crypto-widget="carousel-container"],
.crypto-donation-container[dir="rtl"] [data-crypto-widget="carousel-wrapper"], 
.crypto-donation-container.rtl [data-crypto-widget="carousel-wrapper"] {
    direction: ltr;
}

/* Fix RTL slide positioning - reverse the slide order */
.crypto-donation-container[dir="rtl"] [data-crypto-widget="carousel-wrapper"],
.crypto-donation-container.rtl [data-crypto-widget="carousel-wrapper"] {
    flex-direction: row-reverse;
}

/* Only set slide CONTENT to RTL for Arabic text */
.crypto-donation-container[dir="rtl"] [data-crypto-widget="carousel-slide"],
.crypto-donation-container.rtl [data-crypto-widget="carousel-slide"] {
    direction: rtl;
    text-align: center;
}

/* Fix slide text elements */
.crypto-donation-container[dir="rtl"] .slide-header,
.crypto-donation-container[dir="rtl"] .slide-content,
.crypto-donation-container[dir="rtl"] h2,
.crypto-donation-container[dir="rtl"] h3,
.crypto-donation-container[dir="rtl"] p,
.crypto-donation-container.rtl .slide-header,
.crypto-donation-container.rtl .slide-content,
.crypto-donation-container.rtl h2,
.crypto-donation-container.rtl h3,
.crypto-donation-container.rtl p {
    direction: rtl;
    text-align: center;
}

/* Fix button order in slide actions - Continue on left, Back on right for RTL */
.crypto-donation-container[dir="rtl"] .slide-actions,
.crypto-donation-container.rtl .slide-actions {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}

/* Position Continue/Next button on the left (start) for RTL - DESKTOP ONLY */
.crypto-donation-container[dir="rtl"] .slide-actions .next-btn,
.crypto-donation-container.rtl .slide-actions .next-btn,
.crypto-donation-container[dir="rtl"] .slide-actions .proceed-btn,
.crypto-donation-container.rtl .slide-actions .proceed-btn {
    order: 1;
    margin-left: 0;
    margin-right: auto;
}

/* Position Back/Previous button on the right (end) for RTL - DESKTOP ONLY */
.crypto-donation-container[dir="rtl"] .slide-actions .prev-btn,
.crypto-donation-container.rtl .slide-actions .prev-btn {
    order: 3;
    margin-right: 0;
    margin-left: auto;
}

/* Keep progress bar in center - DESKTOP ONLY */
.crypto-donation-container[dir="rtl"] .slide-actions .inline-progress-bar,
.crypto-donation-container.rtl .slide-actions .inline-progress-bar {
    order: 2;
    margin: 0;
}

/* RTL Button Order - Only when amount selection is disabled - Match LTR specificity */
.crypto-donation-container[dir="rtl"][data-amount-selection="disabled"] .carousel-container .slide-actions .next-btn,
.crypto-donation-container[dir="rtl"][data-amount-selection="disabled"] .carousel-container .slide-actions .proceed-btn,
.crypto-donation-container[dir="rtl"][data-amount-selection="disabled"] .slide-actions .next-btn,
.crypto-donation-container[dir="rtl"][data-amount-selection="disabled"] .slide-actions .proceed-btn,
.crypto-donation-container.rtl[data-amount-selection="disabled"] .carousel-container .slide-actions .next-btn,
.crypto-donation-container.rtl[data-amount-selection="disabled"] .carousel-container .slide-actions .proceed-btn,
.crypto-donation-container.rtl[data-amount-selection="disabled"] .slide-actions .next-btn,
.crypto-donation-container.rtl[data-amount-selection="disabled"] .slide-actions .proceed-btn {
    order: 1; /* Continue/Next on left for RTL */
}

.crypto-donation-container[dir="rtl"][data-amount-selection="disabled"] .carousel-container .slide-actions .inline-progress-bar,
.crypto-donation-container[dir="rtl"][data-amount-selection="disabled"] .slide-actions .inline-progress-bar,
.crypto-donation-container.rtl[data-amount-selection="disabled"] .carousel-container .slide-actions .inline-progress-bar,
.crypto-donation-container.rtl[data-amount-selection="disabled"] .slide-actions .inline-progress-bar {
    order: 2; /* Progress bar in center */
}

.crypto-donation-container[dir="rtl"][data-amount-selection="disabled"] .carousel-container .slide-actions .prev-btn,
.crypto-donation-container[dir="rtl"][data-amount-selection="disabled"] .slide-actions .prev-btn,
.crypto-donation-container.rtl[data-amount-selection="disabled"] .carousel-container .slide-actions .prev-btn,
.crypto-donation-container.rtl[data-amount-selection="disabled"] .slide-actions .prev-btn {
    order: 3; /* Previous on right for RTL */
}

/* Fix button content order for RTL - arrow positioning */
.crypto-donation-container[dir="rtl"] .next-btn,
.crypto-donation-container.rtl .next-btn,
.crypto-donation-container[dir="rtl"] .proceed-btn,
.crypto-donation-container.rtl .proceed-btn {
    flex-direction: row;
}

.crypto-donation-container[dir="rtl"] .prev-btn,
.crypto-donation-container.rtl .prev-btn {
    flex-direction: row;
}

/* Fix arrow directions and spacing for RTL */
.crypto-donation-container[dir="rtl"] .next-btn .fa-arrow-right,
.crypto-donation-container.rtl .next-btn .fa-arrow-right {
    transform: rotate(180deg);
    margin-right: 8px;
    margin-left: 0;
}

.crypto-donation-container[dir="rtl"] .prev-btn .fa-arrow-left,
.crypto-donation-container.rtl .prev-btn .fa-arrow-left {
    transform: rotate(180deg);
    margin-left: 8px;
    margin-right: 0;
}

/* Fix proceed button icon */
.crypto-donation-container[dir="rtl"] .proceed-btn .fa-paper-plane,
.crypto-donation-container.rtl .proceed-btn .fa-paper-plane {
    transform: scaleX(-1);
    margin-right: 8px;
    margin-left: 0;
}

/* RTL hover effects - higher specificity to override base transforms */
html body .crypto-donation-container[dir="rtl"] .carousel-container .slide-actions .next-btn:hover i,
html body .crypto-donation-container[dir="rtl"] .slide-actions .next-btn:hover i,
html body .crypto-donation-container.rtl .carousel-container .slide-actions .next-btn:hover i,
html body .crypto-donation-container.rtl .slide-actions .next-btn:hover i {
    transform: rotate(180deg) translateX(2px);
}

html body .crypto-donation-container[dir="rtl"] .carousel-container .slide-actions .proceed-btn:hover i,
html body .crypto-donation-container[dir="rtl"] .slide-actions .proceed-btn:hover i,
html body .crypto-donation-container.rtl .carousel-container .slide-actions .proceed-btn:hover i,
html body .crypto-donation-container.rtl .slide-actions .proceed-btn:hover i {
    transform: scaleX(-1) translateX(2px);
}

html body .crypto-donation-container[dir="rtl"] .carousel-container .slide-actions .prev-btn:hover i,
html body .crypto-donation-container[dir="rtl"] .slide-actions .prev-btn:hover i,
html body .crypto-donation-container.rtl .carousel-container .slide-actions .prev-btn:hover i,
html body .crypto-donation-container.rtl .slide-actions .prev-btn:hover i {
    transform: rotate(180deg) translateX(-2px);
}

/* Fix modal direction */
.crypto-donation-container[dir="rtl"] .modal-content,
.crypto-donation-container.rtl .modal-content {
    direction: rtl;
    text-align: right;
}

.crypto-donation-container[dir="rtl"] .modal-close,
.crypto-donation-container.rtl .modal-close {
    left: 15px;
    right: auto;
}

/* ===============================================
   Mobile RTL Fixes - Prevent Button Overflow
   =============================================== */

/* Mobile - Responsive button sizing for RTL */
@media (max-width: 768px) {
    /* Override desktop RTL settings for mobile */
    .crypto-donation-container[dir="rtl"] .slide-actions,
    .crypto-donation-container.rtl .slide-actions {
        gap: 8px; /* Reduced gap for mobile */
        padding: 12px 8px; /* Add padding to prevent edge overflow */
        box-sizing: border-box;
        /* Mobile-specific overflow fixes */
        overflow: hidden;
        max-width: 100%;
    }
    
    .crypto-donation-container[dir="rtl"] .slide-actions .next-btn,
    .crypto-donation-container.rtl .slide-actions .next-btn,
    .crypto-donation-container[dir="rtl"] .slide-actions .proceed-btn,
    .crypto-donation-container.rtl .slide-actions .proceed-btn {
        /* Override desktop margins for mobile */
        margin: 0;
        flex: 1;
        max-width: calc(50% - 40px); /* More conservative sizing for mobile */
        min-width: 0;
        box-sizing: border-box;
        padding: 12px 16px;
        font-size: 0.9rem;
        min-height: 48px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .crypto-donation-container[dir="rtl"] .slide-actions .prev-btn,
    .crypto-donation-container.rtl .slide-actions .prev-btn {
        /* Override desktop margins for mobile */
        margin: 0;
        flex: 1;
        max-width: calc(50% - 40px); /* More conservative sizing for mobile */
        min-width: 0;
        box-sizing: border-box;
        padding: 12px 16px;
        font-size: 0.9rem;
        min-height: 48px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .crypto-donation-container[dir="rtl"] .slide-actions .inline-progress-bar,
    .crypto-donation-container.rtl .slide-actions .inline-progress-bar {
        flex-shrink: 0;
        max-width: 80px; /* Smaller progress bar on mobile */
    }
}

/* Very small screens - Stack buttons vertically for RTL */
@media (max-width: 480px) {
    .crypto-donation-container[dir="rtl"] .slide-actions,
    .crypto-donation-container.rtl .slide-actions {
        flex-direction: column-reverse; /* Reverse column for RTL */
        gap: 12px;
        padding: 16px 12px;
    }
    
    .crypto-donation-container[dir="rtl"] .slide-actions .next-btn,
    .crypto-donation-container.rtl .slide-actions .next-btn,
    .crypto-donation-container[dir="rtl"] .slide-actions .proceed-btn,
    .crypto-donation-container.rtl .slide-actions .proceed-btn,
    .crypto-donation-container[dir="rtl"] .slide-actions .prev-btn,
    .crypto-donation-container.rtl .slide-actions .prev-btn {
        order: unset; /* Remove ordering on stacked layout */
        max-width: 100%;
        width: 100%;
        padding: 14px 20px;
        font-size: 0.95rem;
        min-height: 52px;
    }
    
    .crypto-donation-container[dir="rtl"] .slide-actions .inline-progress-bar,
    .crypto-donation-container.rtl .slide-actions .inline-progress-bar {
        order: unset;
        max-width: 100%;
        width: 100%;
        justify-content: center;
    }
}


/* ========== frontend\donation-lookup.css ========== */
/* Crypdu Donate Lookup Styles */
.crypto-donation-lookup-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: var(--surface-primary, #fff);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-md, 0 4px 12px var(--rgba-black-10));
}

.lookup-header {
    text-align: center;
    margin-bottom: 30px;
}

.lookup-header h3 {
    color: var(--text-primary, #333);
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.lookup-header p {
    color: var(--text-secondary, #666);
    margin: 0;
}

.lookup-input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.lookup-input-group input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--border-light, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    font-size: 1rem;
    font-family: monospace;
}

.lookup-input-group input:focus {
    outline: none;
    border-color: var(--crypto-success, #4CAF50);
    box-shadow: 0 0 0 3px var(--rgba-success-10);
}

.lookup-btn {
    background: var(--gradient-success, linear-gradient(135deg, #4CAF50, #45a049));
    color: var(--text-inverse, white);
    border: none;
    padding: var(--space-sm, 12px) var(--space-md, 20px);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

html body .lookup-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-success, 0 4px 12px var(--rgba-success-30));
}

.lookup-example {
    text-align: center;
    color: #666;
}

.lookup-results {
    margin-top: 20px;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-light, #e5e7eb);
}

.donation-found {
    background: var(--gradient-success-light, linear-gradient(135deg, var(--rgba-success-05), var(--rgba-success-03)));
    border-color: var(--rgba-success-20);
}

.donation-not-found {
    background: var(--surface-error-light, var(--rgba-error-05));
    border-color: var(--rgba-error-20);
    color: var(--crypto-error, #dc2626);
}

.donation-details-lookup {
    display: grid;
    gap: 12px;
}

.detail-row-lookup {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--rgba-black-10);
}

.detail-row-lookup:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    color: #374151;
}

.detail-value {
    color: var(--text-dark, #1f2937);
    font-family: monospace;
}

.status-completed {
    color: var(--crypto-success, #059669);
    font-weight: bold;
}

.status-pending {
    color: var(--crypto-warning, #d97706);
    font-weight: bold;
}

/* ========== frontend\donation-receipt.css ========== */
/* Crypdu Donate Receipt Styles */

:root {
    --primary-color: #3b82f6;
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.12);
    --border-radius: 12px;
    --card-radius: 16px;
}

/* Scoped receipt body styles - only apply to receipt pages */
body.crypto-donation-receipt,
.crypto-donation-receipt-container {
    font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 40px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #1e293b;
    line-height: 1.6;
    min-height: 100vh;
}

.receipt-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--shadow-heavy);
    position: relative;
}

/* Professional Header Design */
.receipt-header {
    background: #ffffff;
    border-bottom: 3px solid var(--primary-color);
    position: relative;
}

.header-card {
    background: white;
    padding: 40px;
    position: relative;
}

.header-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.logo-section {
    flex-shrink: 0;
}

/* Logo and Organization Styles */
.logo {
    max-width: 100px;
    max-height: 100px;
    border-radius: 12px;
    object-fit: contain;
    border: 1px solid #e2e8f0;
}

.logo-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
}

.logo-placeholder span {
    color: white;
    font-weight: 700;
    font-size: 28px;
}

.organization-info {
    flex: 1;
    padding-top: 4px;
}

.organization-name {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    margin: 0 0 8px 0;
}

.organization-details {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
    font-weight: 400;
}

.organization-details strong {
    color: #475569;
    font-weight: 500;
}

/* Header Styles */
.header-meta {
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-meta::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color) 0%, transparent 100%);
}

.receipt-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.receipt-info-left {
    text-align: left;
}

.receipt-info-right {
    text-align: right;
}

.receipt-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 4px 0;
}

.receipt-date {
    font-size: 13px;
    color: #64748b;
    font-weight: 400;
    margin: 0;
}

/* Receipt Heading */
.receipt-heading {
    text-align: center;
    padding: 32px 20px 24px;
    background: white;
}

.receipt-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    letter-spacing: -0.025em;
    position: relative;
    display: inline-block;
}

.receipt-title::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 2px;
}

.receipt-body {
    padding: 0 40px 40px;
    background: white;
}

/* Donation Summary */
.donation-summary {
    background: linear-gradient(135deg, #fef7ed 0%, #fed7aa 100%);
    border: 2px solid #fb923c;
    border-radius: var(--border-radius);
    padding: 32px;
    margin: 32px 0;
    text-align: center;
    box-shadow: var(--shadow-light);
    position: relative;
}

.donation-amount {
    font-size: 42px;
    font-weight: 800;
    color: #ea580c;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 4px rgba(234, 88, 12, 0.1);
    letter-spacing: -0.025em;
}

.crypto-amount {
    font-size: 18px;
    color: #9a3412;
    margin: 0 0 16px 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.receipt-container .crypto-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--gradient-crypto-icon);
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    color: #666;
    border: 1px solid #ddd;
}

.crypto-label {
    font-size: 14px;
    color: #7c2d12;
    margin: 0;
    font-weight: 500;
}

/* Receipt Details */
.receipt-details {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius);
    padding: 24px;
    margin: 24px 0;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    color: #374151;
}

.detail-value {
    color: #1f2937;
    font-weight: 500;
}

.status-completed {
    color: #059669;
    font-weight: 700;
}

.thank-you {
    text-align: center;
    padding: 32px 0;
    color: #6b7280;
    font-size: 16px;
    line-height: 1.6;
}

/* Print Styles */
@media print {
    body.crypto-donation-receipt,
    .crypto-donation-receipt-container {
        margin: 0;
        padding: 20px;
        background: white;
    }
    .receipt-container {
        border: none;
        box-shadow: none;
        max-width: none;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    body.crypto-donation-receipt,
    .crypto-donation-receipt-container {
        padding: 20px 10px;
    }
    .header-content {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    .receipt-body {
        padding: 0 20px 40px;
    }
    .donation-summary {
        padding: 24px 20px;
    }
    .donation-amount {
        font-size: 36px;
    }
}

/* Receipt Footer Styles */
.receipt-footer {
    padding: 24px 0;
    margin: 0;
    border-top: 2px solid #e2e8f0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.receipt-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), #60a5fa);
    border-radius: 1px;
}

.receipt-footer .powered-by {
    margin: 0;
    font-size: 13px;
    color: #475569;
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.receipt-footer .powered-by a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 2px 6px;
    border-radius: 4px;
    position: relative;
}

.receipt-footer .powered-by a:hover {
    color: #1e40af;
    background: rgba(59, 130, 246, 0.08);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.receipt-footer .powered-by a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Responsive footer styles */
@media (max-width: 768px) {
    .receipt-footer {
        padding: 20px 0;
        min-height: 50px;
    }
    
    .receipt-footer .powered-by {
        font-size: 12px;
        flex-direction: column;
        gap: 2px;
    }
    
    .receipt-footer::before {
        width: 40px;
    }
}

@media print {
    .receipt-footer {
        background: white;
        border-top: 1px solid #ccc;
        padding: 16px;
    }
    
    .receipt-footer::before {
        display: none;
    }
    
    .receipt-footer .powered-by a {
        color: #333 !important;
        text-decoration: underline;
    }
}