body {
      font-family: sans-serif;
      background-color: #f4f4f4;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      color: #333;
    }

    h1, h2 {
      text-align: center;
      color: #555;
    }

    .loader-container {
      background-color: #fff;
      padding: 20px;
      margin: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 200px;
    }

    .loader {
      margin-top: 10px;
    }

    /* Spinner */
    .spinner {
      border: 6px solid #e0e0e0; /* Light grey */
      border-top: 6px solid #3498db; /* Blue */
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
    }

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

    /* Pulsing Dots */
    .dots {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px; /* Ensure container has height */
    }

    .dots div {
      width: 12px;
      height: 12px;
      background-color: #f3a953; /* Orange */
      border-radius: 50%;
      margin: 0 5px;
      animation: pulse 1.4s infinite ease-in-out both;
    }

    .dots div:nth-child(1) {
      animation-delay: -0.32s;
    }

    .dots div:nth-child(2) {
      animation-delay: -0.16s;
    }

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

    /* Bouncing Bars */
    .bars {
      display: flex;
      justify-content: center;
      align-items: flex-end; /* Align bars to the bottom */
      width: 80px;
      height: 50px;
    }

    .bars div {
      width: 8px;
      height: 10px; /* Start height */
      margin: 0 3px;
      background-color: #5cb85c; /* Green */
      animation: bounce 1.2s infinite ease-in-out;
    }

    .bars div:nth-child(1) { animation-delay: -1.1s; }
    .bars div:nth-child(2) { animation-delay: -1.0s; }
    .bars div:nth-child(3) { animation-delay: -0.9s; }
    .bars div:nth-child(4) { animation-delay: -0.8s; }
    .bars div:nth-child(5) { animation-delay: -0.7s; }

    @keyframes bounce {
      0%, 40%, 100% { transform: scaleY(0.4); }
      20% { transform: scaleY(1.0); }
    }

    /* Flipping Square */
    .flip {
      width: 50px;
      height: 50px;
      background-color: #d9534f; /* Red */
      animation: flip 1.2s infinite ease-in-out;
    }

    @keyframes flip {
      0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
      50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); }
      100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
    }

    /* Button Styles */
    .button-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .button-with-loader {
      background-color: #3498db;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      min-width: 120px; /* Ensure minimum width */
      min-height: 40px; /* Ensure minimum height */
      display: inline-flex; /* Use flexbox for alignment */
      align-items: center;
      justify-content: center;
      position: relative; /* Needed for absolute positioning if used */
      overflow: hidden; /* Hide overflow if needed */
    }

    .button-with-loader:hover:not(:disabled) {
      background-color: #2980b9;
    }

    .button-with-loader:disabled {
      background-color: #a9cce3; /* Lighter blue when disabled */
      cursor: not-allowed;
    }

    /* Small spinner for button */
    .spinner-small {
      border: 3px solid rgba(255, 255, 255, 0.3); /* Lighter border for contrast */
      border-top: 3px solid #ffffff; /* White top border */
      border-radius: 50%;
      width: 18px; /* Smaller size */
      height: 18px; /* Smaller size */
      animation: spin 0.8s linear infinite;
      display: none; /* Hidden by default */
      margin-right: 8px; /* Space between spinner and text */
    }

    .loading-text {
      display: none; /* Hidden by default */
    }

    /* Loading State */
    .button-with-loader.loading .button-text {
      display: none; /* Hide original text */
    }

    .button-with-loader.loading .loader-icon {
      display: inline-block; /* Show spinner */
    }

    .button-with-loader.loading .loading-text {
      display: inline-block; /* Show "Loading..." text */
    }

    /* Optional: Add slight opacity change during loading */
    .button-with-loader.loading {
       opacity: 0.9;
    }

    /* Helper button */
    .button-container button:not(.button-with-loader) {
        margin-top: 15px;
        padding: 8px 15px;
        cursor: pointer;
    }