.toggle-container {
      background: #ffffff;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
      width: 100%;
      /* max-width: 500px; */
      text-align: center;
    }

    /* =======================================================================
       BUTTON CONTAINER & STYLES
       ======================================================================= */
    .button-group {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin-bottom: 2rem;
      background-color: #eee;
      padding: 5px;
      border-radius: 8px;
    }

    .toggle-btn {
      flex: 1;
      padding: 12px 24px;
      border: none;
      background: transparent;
      color: #666;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.3s ease;
    }

    /* Active State Button Styling */
    .toggle-btn.active {
      background-color: #c91112;
      color: white;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    /* =======================================================================
       CONTENT PANELS STYLES
       ======================================================================= */
    .content-panel {
      display: none; /* Hidden by default */
      padding: 20px;
      border-radius: 8px;
      background-color: #fafafa;
      border: 1px solid #e9e9e9;
      text-align: left;
      animation: fadeIn 0.4s ease;
    }

    /* Active State Content Panel */
    .content-panel.active {
      display: block; /* Shown when active class is applied */
    }

    /* Smooth entry animation */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }