/* Loader Overlay */
    .loader-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 9999;
      justify-content: center;
      align-items: center;
    }

    .loader-overlay.active {
      display: flex;
    }

    .loader-container {
      background: white;
      padding: 30px;
      border-radius: 12px;
      text-align: center;
    }

    /* Spinner Animation */
    .spinner {
      width: 50px;
      height: 50px;
      margin: 0 auto 15px;
      border: 4px solid #f3f4f6;
      border-top: 4px solid #3b82f6;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

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

    .loader-text {
      color: #374151;
      font-size: 16px;
      font-weight: 500;
    }

    /* Alternative Loader Styles */
    
    /* Dots Loader */
    .dots-loader {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin: 20px 0;
    }

    .dot {
      width: 12px;
      height: 12px;
      background: #3b82f6;
      border-radius: 50%;
      animation: bounce 1.4s infinite ease-in-out both;
    }

    .dot:nth-child(1) { animation-delay: -0.32s; }
    .dot:nth-child(2) { animation-delay: -0.16s; }

    @keyframes bounce {
      0%, 80%, 100% { transform: scale(0); }
      40% { transform: scale(1); }
    }

    /* Pulse Loader */
    .pulse-loader {
      width: 50px;
      height: 50px;
      margin: 20px auto;
      background: #3b82f6;
      border-radius: 50%;
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(0.8); opacity: 1; }
      50% { transform: scale(1.2); opacity: 0.5; }
    }

    /* Bar Loader */
    .bar-loader {
      width: 100%;
      height: 4px;
      background: #e5e7eb;
      border-radius: 2px;
      overflow: hidden;
      margin: 20px 0;
    }

    .bar-loader-fill {
      height: 100%;
      background: #3b82f6;
      animation: loading 1.5s infinite;
    }

    @keyframes loading {
      0% { width: 0%; margin-left: 0; }
      50% { width: 50%; margin-left: 25%; }
      100% { width: 0%; margin-left: 100%; }
    }